Question

这是我的fiddle

这是我的HTML：

<div class="block">
    <h2>Title</h2>
    <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>

我试图在我的区块内有一个图像。我想调整图像的大小，使其完全适合块内。我已经尝试过100％的高度，但是没有考虑到块的标题，并且高度溢出了块。

Answer 1

尝试display:table

.block{
    display: table;
}

＆＃13;

.block{
    width: 30%;
    height: 100px;
    display: table;
    background: pink;
    
}

img{
   height: 100%;
   max-width: 100%;
}

＆＃13;

<div class="block">
    <h2>Title</h2>
    <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>

＆＃13;

Answer 2

只提供一个恒定像素值（重复一次）的一种可能性：

.block h2 {
  height: 30px;
}

.block img {
  height: calc(100% - 30px);
}

Answer 3

margin-top:-18px

您也可以尝试移动图像查看fiddle

Answer 4

你想做什么？

如果你想做图像背景 - 使用背景图像并使其适合

无论如何，你可以这样做：

.block{
    width: 30%;
    height: 100px;
    display: block;
    background: pink;
    position: relative;
}

img{
   height: 100%;
   max-width: 100%;
}

h2{
    position: absolute;
    top: 10px;
    left: 100px;
}

https://jsfiddle.net/fe11zyh9/1/

Answer 5

是否可以在px中设置IMG的高度？

所以：

img{
   height: 100px;
   max-width: 100%;
}

在具有标题的div中安装图像？

5 个答案: