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。我如何设置图像以重新调整大小，同时保持它们的纵横比。

1509003 次浏览
小开

删除“高度”属性。

<img src="big_image.jpg" width="900" alt=""/>

通过指定两者，您可以更改图像的长宽比。只需设置一个即可调整大小，但保留长宽比。

可选地，为了限制过度使用：

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
小开

Firefox 71+（2019-12-03）和Chrome79+（2019-12-10）支持IMG元素的width和height超文本标记语言属性的内部映射到新的aspect-ratio CSS属性（该属性本身尚无法直接使用）。

计算的长宽比用于为图像保留空间，直到它被加载，并且只要计算的长宽比等于图像的实际长宽比，加载图像后就可以防止页面“跳转”。

为此，必须通过CSS将两个图像维度中的一个覆盖为auto值：

IMG {max-width: 100%; height: auto; }
<img src="example.png" width="1280" height="720" alt="Example" />

在示例中，即使图像尚未加载并且有效图像宽度小于1280作为max-width: 100%的结果，也保持16:9（1280:720）的长宽比。

另请参阅相关的Firefoxbug392261。

小开

backs-size属性仅为ie>=9，但如果您没问题，您可以使用带有background-image并设置background-size: contain的div：

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背景大小留档，您可以使用专有的过滤器声明模拟IE8中的background-size属性：

虽然Internet Explorer 8不支持background-size属性，但可以使用非标准的-ms-filter函数模拟其某些功能：

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
小开
最佳答案 

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">

如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。

小开

下面的解决方案将允许放大和缩小图像，取决于父框的宽度。

所有图像都有一个固定宽度仅用于演示目的的父容器。在生产中，这将是父框的宽度。

最佳实践（2018）：

此解决方案告诉浏览器以最大可用宽度渲染图像，并将高度调整为该宽度的百分比。

.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>

更好的解决方案：

使用更高级的解决方案，您将能够裁剪图像而不管其大小，并添加背景颜色以补偿裁剪。

.parent {width: 100px;}
.container {display: block;width: 100%;height: auto;position: relative;overflow: hidden;padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */}
.container img {display: block;max-width: 100%;max-height: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
<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" src="https://placehold.it/640x220"></div></div>

对于指定填充的行，您需要计算图像的长宽比，例如：

640px (w) = 100%220px (h) = ?
640/220 = 2.909100/2.909 = 34.37%

所以，顶部填充=34.37%。

小开

将图像容器标签的CSS类设置为image-class：

<div class="image-full"></div>

并将其添加到您的CSS样式表中。

.image-full {background: url(...some image...) no-repeat;background-size: cover;background-position: center center;}
小开

如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。

setec的解决方案适用于自动模式下的“收缩到适合”。但是，为了最佳地扩展以适应“自动”模式，您需要首先将接收到的图像放入临时ID中，检查它是否可以在高度或宽度上扩展（取决于其长宽比v/s显示块的长宽比），

$(".temp_image").attr("src","str.jpg" ).load(function() {// callback to get actual size of received image
// define to expand image in Heightif(($(".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");});

当接收到的图像小于显示框时，此方法很有用。您必须以原始小尺寸而不是扩展版本将它们保存在服务器上，以填充更大的显示框以节省大小和带宽。

小开

你可以像这样创建一个div：

<div class="image" style="background-image:url('/to/your/image')"></div>

并使用此css对其进行样式化：

height: 100%;width: 100%;background-position: center center;background-repeat: no-repeat;background-size: contain; // this can also be cover
小开

只需将其添加到您的CSS中，它将自动收缩和扩展，并保持原始比例。

img {display: block;max-width: 100%;max-height: 100%;width: auto;height: auto;}
小开 

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="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wantsthe 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="https://i.stack.imgur.com/aEEkn.png">

小开

要保持响应式图像，同时仍然强制图像具有一定的长宽比，您可以执行以下操作：

超文本标记语言：

<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;}}

这可用于强制执行一定的长宽比，无论作者上传的图像大小如何。

感谢@Kses o athttp://codepen.io/Kseso/pen/bfdhg。检查此URL以获取更多比率和工作示例。

小开

你可以使用这个：

img {width: 500px;height: 600px;object-fit: contain;position: relative;top: 50%;transform: translateY(-50%);}
小开

我一直在努力解决这个问题，最终得到了这个简单的解决方案：

object-fit: cover;width: 100%;height: 250px;

您可以调整宽度和高度以满足您的需求，对象匹配属性将为您进行裁剪。

有关object-fit属性和兼容性表的可能值的更多信息可在此处获得：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

干杯。

小开

要强制图像适合精确的大小，您不需要编写太多代码。它很简单 

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="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

小开

https://jsfiddle.net/sot2qgj6/3/

这是答案，如果你想把图像固定宽度百分比，但不固定像素的宽度。

这在处理不同尺寸的屏幕时很有用。

这些技巧是

  1. 使用padding-top从宽度设置高度。
  2. 使用position: absolute将图像放入填充空间。
  3. 使用max-height and max-width确保图像不会覆盖父元素。
  4. 使用display:block and margin: auto居中图像。

我也评论了小提琴里面的大部分技巧。

我还找到了一些其他方法来实现这一点。在html中不会有真实的图像，所以当我需要html中的“img”元素时，我只喜欢顶部的答案。

使用背景的简单csshttp://jsfiddle.net/4660s79h/2/

背景图像，顶部有单词http://jsfiddle.net/4660s79h/1/

使用绝对位置的概念来自这里http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

小开

使用伪元素进行垂直对齐怎么样？这个较少的代码是用于轮播，但我猜它适用于每个固定大小的容器。它将保持长宽比并在顶部/底部或左侧插入@灰暗条/写入最短尺寸。同时图像水平被文本对齐居中，垂直被伪元素居中。

    > 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;}}
小开

与这里的一些答案非常相似，但在我的情况下，我的图像有时更高，有时更大。

这种风格就像一个魅力，以确保所有图像使用所有可用的空间，保持比例而不是削减：

.img {object-fit: contain;max-width: 100%;max-height: 100%;width: auto;height: auto;}
小开

全屏演示：

img[data-attribute] {height: 100vh;}

请记住，如果视图端口高度大于图像，图像相对于差异会自然退化。

小开

我建议，对于响应式方法，最佳实践是使用视口单元和min/max属性，如下所示：

img{display: block;width: 12vw;height:12vw;max-width:100%;min-width:100px;min-height:100px;object-fit:contain;}
小开

这里有一个解决方案： 

img {width: 100%;height: auto;object-fit: cover;}

这将确保图像始终覆盖整个父级（向下和向上缩放）并保持相同的长宽比。

小开

这是心理上的。使用缩放属性-它解释了自己。

内联样式：

<img src='/nic-cage.png' style=\{\{ maxWidth: '50%', objectFit: 'scale-down' }} />

这将阻止flex拉伸它。在这种情况下，图像将达到其父容器宽度的50%，高度将缩小以匹配。

保持简单。

小开

您可以将容器设置为display: flex和align-items: center（其他align-items值也可以）。除了align-items，您还可以在图像本身上设置align-self。

小开

如果应用程序可以有任何长宽比或分辨率的图像，那么您可以像在这个链接中一样管理高度和宽度。

这使用JavaScript和超文本标记语言

https://stackoverflow.com/a/65090175/13338731

小开

您可以使用：-

transform: scaleX(1.2);

改变宽度而不改变高度。

和

transform: scaleY(1.2);

在不改变宽度的情况下改变高度

您可以在html和css中的图像和视频标签上使用它。这也不会改变方面的比例。

小开

只需将height属性替换为aspect-ratio属性。

img {max-width: 500px;aspect-ratio: 900 / 600;}
<img src="big_image.png" width="900"/>

The aspect-ratio attribute is not necessary, but prevent image layout shifts.

小开

您可以使用aspect-ratio属性css

.my-image {aspect-ratio: 1/1; // squareaspect-ratio: 16/9; // wide screen 1080paspect-ratio: 4/3;aspect-ratio: 2/3;}

提交答案