修复图像大小而无需重新调整尺寸

Question

我有一个宽度为500px的Div;和高度：170px;

该Div包含一个jQuery的幻灯片，从我的数据库中获取随机图像和diaplsys它们。问题在于图像是由用户上传的，可以是任何宽高比/任何大小。我需要图像以适应div，而不用使用img style ='height：x;宽度：X;

基本上希望所有图像能够以正确的方式正确显示，并且具有极高的质量。

我不想，因为它们作为显示在网站的其他部分的全尺寸/质量

可以在任何提供解决方案，以限制其图像的尺寸可以上传？

Answer 1

您可以使用css来设置幻灯片中图像的大小，而不必改变图像的高宽比。

-set the height of the image to the height of the slideshow container

-make the width auto so its maintains its aspect ratio

-set a max-width so it doesn't get wider than the slideshow

slideshow.img{ 
    height:170px 
    width:auto;/*maintain aspect ratio*/ 
    max-width:500px; 
} 

注意如果原来的尺寸小的图像可能会比幻灯片渺茫。

Answer 2

验证正在提交到数据库的图像。

Answer 3

你应该可以使用CSS的max-width属性。如果你这样做，你不想指定宽度或高度。

你的HTML：

<div id="yourContainer"> 
    <img src="imagePath" /> 
</div> 

而且你的CSS：

#yourContainer { 
    width: 500px; 
    height: 170px; 
} 

#yourContainer img { 
    max-width: 100%; 
    max-height: 100%; 
} 

这不会居中图像的容器内，但应把工作给你做。

Answer 4

我已经找到了如何实现图像尺寸保持纵横比和一段简单的CSS代码如下居中图像：

width: auto !important; /*Keep the aspect ratio of the image*/ 
height: 140px !important; 
margin: 0 auto 1em auto; /*Center the image*/ 

希望这有助于有人:)