Html 内联块对象未使用动态大小的图像正确调整大小
我试图将一组浮动块居中，这些浮动块包含动态缩放的图像。但是，我遇到了一个问题，我用来输入浮动块的内联块没有缩小到图像的新大小。相反，它将包装为图像的原始大小，留下一个很大的空白Html 内联块对象未使用动态大小的图像正确调整大小,html,image,css,Html,Image,Css,我试图将一组浮动块居中，这些浮动块包含动态缩放的图像。但是，我遇到了一个问题，我用来输入浮动块的内联块没有缩小到图像的新大小。相反，它将包装为图像的原始大小，留下一个很大的空白 正文{ 文本对齐：居中； } .inlineblock{ 背景：红色； 显示：内联块； } .约束器{ 宽度：20%； 浮动：左； } .约束器img{ 宽度：100%； } 产品名称 产品名称 有人能帮我解决这个问题吗 感谢您将两个.constrainerdivs的宽度设置为20%。这意味着宽度是父级.inline
正文{
文本对齐：居中；
}
.inlineblock{
背景：红色；
显示：内联块；
}
.约束器{
宽度：20%；
浮动：左；
}
.约束器img{
宽度：100%；
}
产品名称
产品名称
感谢您将两个
.constrainer20%.inlineblock.constrainer.inlineblock.constrainer300px实例：您正在将两个
.constrainer20%.inlineblock.constrainer.inlineblock.constrainer300pxbody {
text-align: center;
}
.inlineblock {
background: red;
display: inline-block;
}
.constrainer {
width: 20%;
float: left;
}
.constrainer img {
width: 100%;
}
<body>
<div class="inlineblock">
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
</div>
</body>