如何将img完全安装到div中，使我看不到背景颜色？
如何将img完全安装到div中，使我看不到背景颜色？
提问于 2022-05-14 16:48:26
一个白色的背景可以看到在底部的div，这是固定的吗？
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic_1 {
height: 300px;
width: 300px;
inline-size: 100%;
object-fit: cover;
}<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div> <a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://cf.ltkcdn.net/horoscopes/images/orig/239601-1600x1030-aries-
constellation.jpg " id="Aries_pic_1">
</a>
</div>
</div>
</html>
Stack Overflow用户
发布于 2022-05-14 17:20:23
为此，我将使用flex。
考虑到您已经在min-width和min-height上应用了flexbox-item-1，我怀疑您希望在映像上进行响应性调整--使用固定的值不会让您这样做。
容器元素上的display: flex将自动使第二个容器div占用剩余的空间，以及a-element。应用max-width: 100%确保img 不会从容器中溢出。应用height: 100%和object-fit: cover以及瞧，您得到了一个完全响应的容器，里面有一个img-element。
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
display: flex;
}
#Aries_pic_1 {
max-width: 100%;
height: 100%;
object-fit: cover;
}<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div>
<a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://www.fillmurray.com/640/360" id="Aries_pic_1">
</a>
</div>
</div>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72242267
复制相关文章
相似问题
腾讯云开发者
