javascript 在固定大小的 div 中显示未知大小的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21265135/
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
displaying image of unknown size inside div of fixed size
提问by timmaktu
I have a <div>of fixed size say height:100px and width:100px.
I have to display images of unknown size inside this <div>such that following cases arise:
我有一个<div>固定大小的说height:100px 和width:100px. 我必须在其中显示未知大小的图像，<div>以便出现以下情况：
- image width > div width
- image width < div width
- image width = div width
- image height > div height
- image height < div height
- image height = div height
- 图像宽度 > div 宽度
- 图像宽度 < div 宽度
- 图像宽度 = div 宽度
- 图像高度 > div 高度
- 图片高度 < div 高度
- 图像高度 = div 高度
no matter what, what is the best cross browser strategy, with support for legacy browsers, to display them with following criteria:
无论如何，最好的跨浏览器策略是什么，支持旧浏览器，以以下标准显示它们：
- no white space around image
- nicely centered (horizontally and vertically) if overflow
- 图像周围没有空白
- 如果溢出，则很好地居中（水平和垂直）
采纳答案by gilly3
To eliminate white space, set min-heightand min-widthto 100%for the images. To clip the overflow, set overflow: hiddenon the div. To center overflowing images, use absolute positioning and some JavaScript to set topand leftvalues based on the size of the image.
为了消除空白，集min-height并min-width到100%的图像。要剪辑溢出，请overflow: hidden在 div 上设置。要将溢出的图像居中，请使用绝对定位和一些 JavaScript 来根据图像的大小设置top和left值。
Edit:If the image is larger than the container in both dimensions, use some JavaScript to remove the minHeightand minWidthand then set the heightto 100%. If that leaves whitespace on the width, set heightto ""and set widthto 100%:
编辑：如果图像比在两个维度的容器变大，使用一些JavaScript以除去minHeight和minWidth，然后设置height到100%。如果在宽度上留下空白，请设置height为""并设置width为100%：
.centeredImageContainer {
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
.centeredImage {
min-width: 100%;
min-height: 100%;
position: absolute;
}
function centerImage(img) {
var container = img.parentNode;
if (img.offsetHeight > container.clientHeight &&
img.offsetWidth > container.clientWidth) {
img.style.minHeight = "0";
img.style.minWidth = "0";
img.style.height = "100%";
if (img.offsetWidth < container.clientWidth) {
img.style.height = "";
img.style.width = "100%";
}
}
img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}
回答by Plato
edit:
编辑：
fiddle
小提琴
html:<div id="myPic"></div>
html：<div id="myPic"></div>
css, if you want a big pic to shrink to fit while still filling the whole div, and want a small pic to expand to fill the whole div:
css，如果你想要一个大图片缩小以适应同时仍然填充整个 div，并且想要一个小图片扩展以填充整个 div：
#myPic{
width: 100px;
height: 100px;
background-image: url(/abs/path/img.jpg);
background-size: cover;
}
css, if you want a big pic to only display a window of the middle without resizing:
css，如果你想让一张大图只显示中间的一个窗口而不调整大小：
#myPic{
width: 100px;
height: 100px;
background-image: url(/abs/path/img.jpg);
background-position: center center;
}
I don't know of a way to both expand small images to fit, while not shrinking big images.
我不知道有什么方法可以既扩展小图像以适应，又不缩小大图像。
回答by mattsoave
If you mean that you need to have no whitespace includingabove a landscape-oriented image, for example (i.e. the photo needs to fill the square, regardless of whether it is originally a square), then you may want to look into setting the image as the div's background and using background-size: cover. See this linkfor browser support.
例如，如果您的意思是不需要包含横向图像上方的空白（即照片需要填充正方形，无论它最初是否为正方形），那么您可能需要考虑设置图像作为 div 的背景并使用background-size: cover. 请参阅此链接以获取浏览器支持。
回答by Destiny Maina
The best way to do this is by using object-fit property.
最好的方法是使用 object-fit 属性。
.image-container {
width: 400px;
height: 300px;
}
.centered-image {
width: 100%;
height: 100%;
object-fit: cover;
}<div class="image-container">
<img src="https://24seven.co.ke/uploads/sliders/1550944223ecommmerce.jpg" alt="24seven Developers slider" class="centered-image">
</div>For more illustrations and geeks see this.
有关更多插图和极客，请参阅此内容。
