<分区>
标签 css
<分区>
在我的代码中，我将图像置于 div 的中心。此解决方案适用于方形或横向格式的图像，但不适用于纵向格式的图像。
HTML 看起来像这样:
<div class="gallery"><img class="gallery"></div>
这是我的 CSS:
div.gallery {
position: relative;
z-index: 2;
overflow: hidden;
}
img.gallery {
height:100%;
min-width: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
box-sizing: border-box;
z-index: 1;
}
我试着把 img.gallery 放在
min-width: 100%;
max-width: 100%;
但这并不能解决问题，因为图片在 div 中太大了。有人知道我的线索吗？
最佳答案
我相信以下方法可以解决您的问题。我使用 position: absolute 和 transform: translate 将图像置于 div 中心，而 overflow: hidden 隐藏了溢出的内容。
div.gallery {
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
z-index: 2;
overflow: hidden;
}
img.gallery {
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="gallery">
<img src="http://via.placeholder.com/1000x1000" class="gallery">
</div>关于css - 在 div 中居中图像而不拉伸(stretch)它，无论大小和格式如何，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51043722/