CSS强制图像调整大小并保持纵横比

Question

我正在使用图像,我遇到了纵横比问题.

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

正如你所看到的,height并width已经指定.我为图片添加了CSS规则:

img {
  max-width:500px;
}

但是big_image.jpg,我收到width=500和height=600.我如何设置图像以重新调整大小,同时保持其纵横比.

Answer 1

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

如果图像对于指定区域来说太大(这将使图像缩小,则会使图像缩小).

Answer 2

下面的解决方案将允许放大和缩小图像,具体取决于父框宽度.

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

最佳实践(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.909
100/2.909 = 34.37%

因此,顶部填充= 34.37%.

Answer 3

我很难解决这个问题,并最终得出了这个简单的解决方案:

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

您可以调整宽度和高度以满足您的需要,对象适合属性将为您进行裁剪.

干杯.

Answer 4

background-size属性只是> = 9,但如果你没问题,你可以使用div with background-image和set 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在标签本身上没有width/height属性.

这种方法与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')";

Answer 5

这里的答案非常类似,但在我的情况下,我的图像有时更高,有时更大.

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

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

Answer 6

删除"高度"属性.

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

Answer 7

这是心理上的。使用按比例缩小属性 - 它本身就解释了。

内联样式：

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

这将阻止 Flex 拉伸它。在这种情况下，图像将变为其父容器宽度的 50%，并且高度将缩小以匹配。

把事情简单化。

Answer 8

height只需用属性替换属性即可aspect-ratio。

img {
  max-width: 500px;
  aspect-ratio: 900 / 600;
}

<img src="big_image.png" width="900"/>

该aspect-ratio属性不是必需的，但可以防止图像布局发生变化。

Answer 9

这是一个解决方案：

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

这将确保图像始终覆盖整个父级（缩小和放大）并保持相同的纵横比。

Answer 10

只需将其添加到您的CSS中,它将自动缩小和扩展,同时保持原始比率.

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

Answer 11

没有标准方法可以保留图像的宽高比width,height并max-width一起指定.

所以我们被迫在加载图像时指定width和height阻止页面"跳转",或者使用max-width而不是指定图像的尺寸.

指定just width(不height)通常没有多大意义,但您可以尝试height通过IMG {height: auto; }在样式表中添加规则来覆盖HTML属性.

另请参阅相关的Firefox bug 392261.

Answer 12

我建议采用响应式方法，最佳实践是使用视口单位和最小/最大属性，如下所示：

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

Answer 13

要强制图像适合精确尺寸，您不需要编写太多代码。就这么简单

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

Answer 14

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”元素时，我个人更喜欢最上面的答案。

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

顶部带有文字的背景图像 http://jsfiddle.net/4660s79h/1/

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

Answer 15

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

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

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

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

Answer 16

要在保持图像自适应的同时仍使图像具有一定的宽高比，可以执行以下操作：

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以获取更多比率和有效示例。

Answer 17

你可以使用这个：

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