HTML图像和div调整大小

Question

.d1 {
    background-color: red;
    text-align: center;
}

<div class="d1">
    <img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg">
</div>

我使用上面的简单代码在image中间显示div。代码很好但是当我调整窗口大小低于图像宽度时，border / div不会覆盖图像...有没有办法解决这个问题？ TY

Answer 1

.d1 {
   background-color: red;
} 
.img{
   display: block;
   width: 100%;
   margin: 0px auto;
}

    

将图像视为块内容而不是内联元素。

我希望这会有所帮助。

Answer 2

如果您想为<div>使用背景图片，建议您将图片设置为div的background-image，并移除<img>元素。

这将使您免于使用添加元素并解决您的问题：

.d1 {
    width:300px;
    height:100px;
    background-color: red;
    text-align: center;
    background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg);
    background-size:cover;
}

<div class="d1">    
</div>