CSS强制图像调整⼤⼩并保持纵横⽐
本⽂翻译⾃：
I am working with images, and I ran across a problem with aspect ratios. 我正在使⽤图像，我遇到了纵横⽐问题。
我正在使⽤图像，我遇到了纵横⽐问题。
<img src="big_image.jpg" width="900" height="600" alt="" />
As you can e, height and width are already specified. 如您所见，已指定
如您所见，已指定height和width 。
我为图
。 I added CSS rule for images: 我为图⽚添加了CSS规则：
img {
max-width:500px;
五行属木的名字
}
But for big_image.jpg , I receive width=500 and height=600 . 但是对于
水草鱼缸
。 How I
但是对于big_image.jpg ，我收到width=500和height=600 。
can t images to be re-sized, while keeping their aspect ratios. 我如何设置图像以重新调整⼤⼩，同时保持其纵横⽐。
怀孕可以吃番石榴吗我如何设置图像以重新调整⼤⼩，同时保持其纵横⽐。
#1楼
#2楼
Remove the "height" property. 删除“⾼度”属性。
脊柱侧弯的治疗
删除“⾼度”属性。
<img src="big_image.jpg" width="900" alt=""/>
By specifying both you are changing the aspect ratio of the image. 通过指定两者，您正在更改图像的纵横⽐。
通过指定两者，您正在更改图像的纵横⽐。 Just tting one will resize but prerve the aspect ratio. 只需设置⼀个将调整⼤⼩但保留纵横⽐。
只需设置⼀个将调整⼤⼩但保留纵横⽐。
Optionally, to restrict oversizings: （可选）限制夸⼤：
（可选）限制夸⼤：
<img src="big_image.jpg" width="900" alt="" />
旧厂房改造#3楼
There is no standard way to prerve aspect ratio for images with width , height and max-width specified together. 没有标准⽅
没有标准⽅法来保持width ， height和max-width⼀起指定的图像的宽⾼⽐。
So we are forced either to specify width and height to prevent page “jumps” during loading images, or to u max-width and not specify dimensions for images. 所以我们被迫指定
所以我们被迫指定width和height以防⽌在加载图像期间页⾯“跳跃”，或者使⽤max-width⽽不指定图像的尺⼨。
世界的起源Specifying just width (without height ) typically makes not much n, but you can try to override the height HTML-attribute by adding a rule like IMG {height: auto; } 指定只是
指定只是width （没有height ）通常没有多⼤意义，但您可以尝试通过添加IMG {height: auto; }等规则来覆盖height HTML属性IMG {height: auto; }IMG {height: auto; } into your stylesheet.IMG {height: auto; }到你的样式表。
See also the related Firefox . 另请参阅相关的Firefox
。
另请参阅相关的Firefox 。
#4楼
The background-size property is ie>=9 only, but if that is fine with you, you can u a div with background-image and t
background-size属性仅为> = 9，但如果你没问题，可以使⽤带background-image的div并设background-size: contain : background-size属性仅为> = 9，但如果你没问题，可以使⽤带
置background-size: contain ：
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Now you can just t your div size to whatever you want and not only will the image keep its aspect r
atio it will also be centralized both vertically and horizontally within the div. 现在您可以将div⼤⼩设置为您想要的任何值，不仅图像保持其宽⾼
现在您可以将div⼤⼩设置为您想要的任何值，不仅图像保持其宽⾼
⽐，它还将在div中垂直和⽔平集中。 Just don't forget to t the sizes on the css since divs don't have the width/height
⽐，它还将在div中垂直和⽔平集中。
attribute on the tag itlf. 只是不要忘记在css上设置⼤⼩，因为div在标签本⾝上没有width / height属性。
只是不要忘记在css上设置⼤⼩，因为div在标签本⾝上没有width / height属性。
This approach is different than tecs answer, using this the image area will be constant and defined by you (leaving empty spaces either horizontally or vertically depending on the div size and image aspect ratio), while tecs answer will get you a
box that exactly the size of the scaled image (without empty spaces). 这种⽅法与tecs的答案不同，使⽤此⽅法，图像区域将
这种⽅法与tecs的答案不同，使⽤此⽅法，图像区域将
是恒定的并由您定义（根据div⼤⼩和图像宽⾼⽐在⽔平或垂直⽅向留下空⽩区域），⽽tecs答案将为您提供⼀个完全相同的⽅励志作文500字
宛如的意思框缩放图像的⼤⼩（没有空格）。
Edit: According to the you can simulate the background-size property in IE8 using a proprietary filter declaration: 编辑：根据
编辑：根据
您可以使⽤专有过滤器声明模拟IE8中的background-size属性：
Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its
functionality using the non-standard -ms-filter function: 虽然Internet Explorer 8不⽀持background-size属性，但可
虽然Internet Explorer 8不⽀持background-size属性，但可以使⽤⾮标准-ms-filter函数模拟其某些功能：
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
#5楼
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; }
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="i./aEEkn.png"> This will make image shrink if it's too big for specified area (as downside, it will not enlarge image). 如果图像对于指定区域来
如果图像对于指定区域来
说太⼤（这将使图像缩⼩，则会使图像缩⼩）。
#6楼
The solutions below will allow scaling up and scaling down of the image , depending on the parent box width. 下⾯的解决⽅案
下⾯的解决⽅案
将允许放⼤和缩⼩图像 ，具体取决于⽗框宽度。
All images have a parent container with a fixed width for demonstration purpos only . 所有图像都有⼀个具有固定宽度的⽗
所有图像都有⼀个具有固定宽度的⽗
在⽣产中，这将是⽗框的宽度。
容器， 仅⽤于演⽰⽬的 。
。 In production, this will be the width of the parent box. 在⽣产中，这将是⽗框的宽度。
Best Practice (2018)：最佳实践（2018年）：
This solution tells the browr to render the image with max available width and adjust the height as
a percentage of that width. 此解决⽅案告诉浏览器渲染具有最⼤可⽤宽度的图像，并将⾼度调整为该宽度的百分⽐。
此解决⽅案告诉浏览器渲染具有最⼤可⽤宽度的图像，并将⾼度调整为该宽度的百分⽐。
.parent { width: 100px; } img { display: block; width: 100%; height: auto; }
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <div class="parent"> <img width="400" height="400" src="plac Fancier Solution：发烧友解决⽅案：
With the fancier solution, you'll be able to crop the image regardless of its size and add a background color to compensate for the cropping. 使⽤更⾼级的解决⽅案，您将能够裁剪图像，⽆论其⼤⼩如何，并添加背景颜⾊以补偿裁剪。
使⽤更⾼级的解决⽅案，您将能够裁剪图像，⽆论其⼤⼩如何，并添加背景颜⾊以补偿裁剪。
.parent { width: 100px; } .container { display: block; width: 100%; height: auto; position: relative; overflow: hidden; padding: 34.37% 0 0 0; /* 34.37% = 10 <p>This image is originally 640x220, but should get resized by the CSS:</p> <div class="parent"> <div class="container"> <img width="640"
height="220 For the line specifying padding, you need to calculate the aspect ratio of the image, for example: 对于指定填充的⾏，您需要
对于指定填充的⾏，您需要
计算图像的纵横⽐，例如：
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
So, top padding = 34.37%. 因此，顶部填充= 34.37％。
因此，顶部填充= 34.37％。
