使用符合图像宽高比的div填充div [英] Fill a div with an image respecting aspect ratio

问题描述

可以使用图片填充 div，使得至少一个图片尺寸为100％，另一个尺寸的宽度或尺寸与div相同，同时尊重图片的宽高比。

Is it possible to fill a div with an image such that at least one image dimension is 100% and the other dimension is either wider or equal size as the div, whilst respecting the image's aspect ratio.

一个例子可以使用类 wide 和 tall like this：

An example could use the classes wide and tall like this:

<div class="tall">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Klaproos.jpg/266px-Klaproos.jpg"/>
</div>

<div class="wide">
  <img src="https://groenevrijdag.files.wordpress.com/2013/11/klaproos2.jpg"/>
</div>

div {
  width: 400px; height: 400px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
}
div.tall img { width: 100%;  margin-top: -50%; }
div.wide img { height: 100%; margin-left: -50%; }

https://jsfiddle.net/7tuod6vu/

我正在寻找一个纯HTML + CSS解决方案，它适用于响应矩形正方形）。由于这个特殊的原因，Javascript将是一个痛苦，因为需要确定宽度或高度应该是100％在每次调整大小。

I'm looking for a pure HTML+CSS solution which works for responsive rectangular (not necessarily square) divs. For this particular reason, Javascript would be a pain as one would need to determine whether the width or height should be 100% on every resize. Server side wouldn't even be an option.

是否存在纯HTML + CSS解决方案？

Does a pure HTML+CSS solution exist for this?

EDIT 从一开始就应该清楚这一点，对不起：（我不是在寻找背景图像解决方案，因为它不允许base64-inhtml表示图像，我认为背景图像在语义上不同于< img> s。

EDIT Should have been clear about this from the beginning, sorry about that :( I'm not looking for the background-image solution, since it does not allow base64-inhtml representation of images. Moreover, I think background-image's are semantically different from <img>s.

推荐答案

请考虑使用CSS object-fit 属性。

Consider using the CSS object-fit property.

5.5。调整对象大小： object-fit
属性

fit 属性指定如何将替换的
元素的内容适配到由其已用高度和
宽度建立的框中。

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

以下是两个值：

• cover

替换的内容的大小可以保持其长宽比，而
填充元素的整个内容框。

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.

包含

contain

替换的内容的大小可以保持其长宽比，而
则适合在元素的内容框中。

The replaced content is sized to maintain its aspect ratio while fitting within the element's content box.

因此，使用 cover ，图像保持其长宽比并涵盖所有可用空间。当然，这意味着大部分图片可能会在屏幕外裁剪。

So, with cover the image retains its aspect ratio and covers all available space. Of course, this means that much of an image may be cropped off-screen.

使用包含宽高比也被保持，但是图像缩放以适合框内。

With contain the aspect ratio is also maintained, but the image scales to fit within the box. This means that an image may have whitespace on the left and right, or top and bottom.

浏览器兼容性

撰写本文时， Internet Explorer不支持 object-fit 。有关变通方法，请参阅：

As of this writing, object-fit is not supported by Internet Explorer. For a workaround see:

• CSS的整洁技巧 object-fit 其他浏览器）


• fitie - An object-fit polyfill for Internet Explorer


• object-fit-images - 在IE9，IE10，IE11，Edge和其他旧版浏览器中添加 object-fit


• 用于CSS 对象的Polyfill（主要是IE） -fit 属性将

• Neat trick for CSS object-fit fallback on Edge (and other browsers)
• fitie - An object-fit polyfill for Internet Explorer
• object-fit-images - Adds support for object-fit on IE9, IE10, IE11, Edge and other old browsers
• Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.

更多信息

• MDN object-fit 属性
• 
  
• CSS-Tricks object-fit 属性


• object-fit 浏览器支持@ caniuse.com

• MDN object-fit property
• CSS-Tricks object-fit property
• object-fit browser support @ caniuse.com

这篇关于使用符合图像宽高比的div填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！