CSS:div中的响应img大小

Question

我有一个"信息部分"（div），左边应该是div的100% height和div的50% width的图片。问题是，图片缩放比例可能过高，变得"不清晰"。那么，我该如何解决这个问题，并且仍然拥有"高质量"的图像呢？

我试过了：

.preview-news-post:first-child {
    margin-top: 5%;
    width: 100%;
    height: 350px;
}

.preview-news-post:first-child img {
    width: 50%;
    height: 100%;
}

所以preview-news-post是width为100%的div（因为div包装，100%等于1600px）

Answer 1

使用设置为图像原始宽度/高度的max-width或max-height设置。此外，我不会强迫图像为标题的50%——这在大多数情况下会扭曲iamage，并以错误的高宽比例显示它。相反，您可以使用auto表示宽度，这将保持与（灵活）高度的原始比例：

.preview-news-post:first-child img {
    height: 100%;
    max-height: 240px;
    width: auto;
}

（或者反过来：50%的宽度加上最大宽度和高度自动）