为什么浏览器会缩小图像，尽管其容器看起来足够大，可以容纳其全部大小

Question

我有一张分辨率为211乘135的图像，它的div容器是215乘140。为什么Chrome显示的图像是192乘122？

我正在Wordpress上编辑一个单独的页面，这是我能够操作的HTML和CSS代码：

<div class="proven-struct-small">
<img src="https://provenwealth.com/wp-content/uploads/2021/06/folded-euros.jpg" />
</div>
<h4 class="proven-horizontal-line-title"><a href="/wealth-management/managed-portfolios/">Managed Portfolios</a></h4>

.proven-struct-small {
padding-top: 0;
height: 140px;
width: 215px;
}

Answer 1

您可以将height:100%添加到CSS中的图像中，使其自动获取其父图像的整个高度，在本例中为div，如下所示：

.proven-struct-small {
padding-top: 0;
height: 140px;
width: 215px;
}
.proven-struct-small img {
height: 100%;
}

<div class="proven-struct-small">
<img src="https://provenwealth.com/wp-content/uploads/2021/06/folded-euros.jpg" />
</div>
<h4 class="proven-horizontal-line-title">
<a href="/wealth-management/managed-portfolios/">Managed Portfolios</a>
</h4>

正如另一位用户指出的那样，你的图片链接断了，但我尝试了另一个，看起来效果很好。

Answer 2

事实证明WordPress在上传后谎报了图片的大小。图片的元数据显示211乘以135，但我认为插件的大小减少了192乘以122。问题不在于我的代码。。。

编辑：WordPress的界面没有准确地表示Web服务器的真实内容。因此，界面生成的链接有时会指向错误的图像或服务器上根本没有图像。真是松了一口气！