CSS 在 div 中包含图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9071830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contain an image within a div?
提问by varatis
I want to contain an image into a 250 x 250 div, forcing the image to resize but not stretch. How can I do this? By the way, the image will usually be bigger than the div itself, which is why resizing comes into the picture.
我想将图像包含到 250 x 250 div 中，强制图像调整大小但不拉伸。我怎样才能做到这一点？顺便说一下，图像通常会比 div 本身大，这就是调整大小进入图片的原因。
<div id = "container">
<img src = "whatever" />
</div>
#container { width:250px; height:250px; border:1px solid #000; }
Here's a jsfiddle which someone can edit:
这是一个有人可以编辑的 jsfiddle：
回答by Oliver
Use max width and max height. It will keep the aspect ratio
使用最大宽度和最大高度。它将保持纵横比
#container img
{
max-width: 250px;
max-height: 250px;
}
回答by ptim
object-fit, behaves like background-size, solving the issue of scaling images up and down to fit.
object-fit, 行为类似于background-size，解决了上下缩放图像以适应的问题。
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
object-fit CSS 属性指定被替换元素的内容应该如何适应由其使用的高度和宽度建立的框。
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
Browser Support
浏览器支持
There's no IE support, and support in Edge begins at v16, only for imgelement: https://caniuse.com/#search=object-fit
没有 IE 支持，Edge 中的支持从 v16 开始，仅适用于img元素：https: //caniuse.com/#search=object-fit
The bfred-it/object-fit-imagespolyfill works very well for me in IE11, tested on Browserstack: demo.
该bfred-IT /对象配合图像填充工具都非常好，我在IE11上Browserstack测试：演示。
Alternative without polyfill using an image in SVG
使用 SVG 中的图像不使用 polyfill 的替代方法
For Edge pre v16, and ie9, ie10, ie11:
对于 Edge pre v16 和 ie9、ie10、ie11：
You can crop and scale any image using CSS
object-fitandobject-position. However, these properties are only supported in the latest version of MS Edge as well as all other modern browsers.If you need to crop and scale an image in Internet Explorer and provide support back to IE9, you can do that by wrapping the image in an , and using the
viewBoxandpreserveAspectRatioattributes to do whatobject-fitandobject-positiondo.http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap
您可以使用 CSS
object-fit和object-position. 但是，这些属性仅在最新版本的 MS Edge 以及所有其他现代浏览器中受支持。如果您需要在 Internet Explorer 中裁剪和缩放图像并向 IE9 提供支持，您可以通过将图像包装在 中，并使用
viewBox和preserveAspectRatio属性来执行操作object-fit和object-position操作来实现。http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap
(The author explains the technique thoroughly, and duplicating the detail here would be impractical.)
（作者彻底解释了该技术，在这里复制细节是不切实际的。）
回答by Juan Carlos Castro
You have to style the image like this
你必须像这样设计图像
#container img{width:100%;}
and the container with hidden overflow:
和隐藏溢出的容器：
#container{width:250px; height:250px; overflow:hidden; border:1px solid #000;}
回答by crowmagnumb
Here is javascript I wrote to do just this.
这是我为做到这一点而编写的 javascript。
function ImageTile(parentdiv, imagediv) {
imagediv.style.position = 'absolute';
function load(image) {
//
// Reset to auto so that when the load happens it resizes to fit our image and that
// way we can tell what size our image is. If we don't do that then it uses the last used
// values to auto-size our image and we don't know what the actual size of the image is.
//
imagediv.style.height = "auto";
imagediv.style.width = "auto";
imagediv.style.top = 0;
imagediv.style.left = 0;
imagediv.src = image;
}
//bind load event (need to wait for it to finish loading the image)
imagediv.onload = function() {
var vpWidth = parentdiv.clientWidth;
var vpHeight = parentdiv.clientHeight;
var imgWidth = this.clientWidth;
var imgHeight = this.clientHeight;
if (imgHeight > imgWidth) {
this.style.height = vpHeight + 'px';
var width = ((imgWidth/imgHeight) * vpHeight);
this.style.width = width + 'px';
this.style.left = ((vpWidth - width)/2) + 'px';
} else {
this.style.width = vpWidth + 'px';
var height = ((imgHeight/imgWidth) * vpWidth);
this.style.height = height + 'px';
this.style.top = ((vpHeight - height)/2) + 'px';
}
};
return {
"load": load
};
}
}
And to use it just do something like this:
要使用它，只需执行以下操作：
var tile1 = ImageTile(document.documentElement, document.getElementById("tile1"));
tile1.load(url);
I use this for a slideshow in which I have two of these "tiles" and I fade one out and the other in. The loading is done on the "tile" that is not visible to avoid the jarring visual affect of the resetting of the style back to "auto".
我将它用于幻灯片，其中我有两个“瓷砖”，我淡出一个，另一个淡入。加载是在不可见的“瓷砖”上完成的，以避免重置的刺耳视觉影响样式回到“自动”。
回答by MMM
Since you don't want stretching (all of the other answers ignore that) you can simply set max-width and max-height like in my jsFiddle edit.
由于您不想拉伸（所有其他答案都忽略了这一点），您可以像在我的jsFiddle edit 中一样简单地设置 max-width 和 max-height 。
#container img {
max-height: 250px;
max-width: 250px;
}
See my example with an image that isn't a square, it doesn't stretch
请参阅我的示例，图像不是正方形，它不会拉伸
回答by IsisCode
#container img{
height:100%;
width:100%;
}
回答by daniel
<div id ="container"> <img src = "http://animalia-life.com/data_images/duck/duck9.jpg"/>
<div id ="container"> <img src = "http://animalia-life.com/data_images/duck/duck9.jpg"/>
#container img {
max-width:250px;
max-height:250px;
width: 250px;
height: 250px;
border:1px solid #000;
}
The img will lose aspect ratio
img 将失去纵横比
