Question

我试图建立自己的网站作为投资组合网站。我试图在div中添加图像，但是当图像变大时，div也会变大。我只是希望图像更大，但div大小相同。在这里你可以找到我的jsfiddle：

我正在谈论的代码就是这个：

<div class="bar">
  <div class="barStyle">
    <p class="paragraphBar"><img src="images/icon2.png" width="20px" height="20px" alt"Projects">TEST TEST.
    </p>
  </div>
</div>

我希望有人可以帮助我。

Answer 1

希望这会对你有所帮助

＆＃13;

    .image-wrapper {
        display: inline-block;
        width: 100px;
        height:150px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border: 1px solid black;
    }

＆＃13;

<div class="image-wrapper" style="background-image: url('http://www.lorempixel.com/200/300')"></div>

＆＃13;

Answer 2

display: table;

将使div与图像大小相同。虽然如果你总是希望它们具有相同的尺寸，为什么不使用背景图像而不是img？

编辑： DIV：

width: 20%;
max-width: 20%;
max-height: 200px;
height: 200px;

Answer 3

确保你的div是固定的宽度和高度

.barStyle{
    width:18px;
    height:18px;
    overflow:visible;
}

使您的图片比您的图片大一点

更改DIV内的图像大小

3 个答案: