CSS：div中的响应式图像大小答案

【问题标题】：CSS: responsive img size in divCSS：div中的响应式图像大小
【发布时间】：2016-04-11 20:49:50
【问题描述】：

我有一个“信息部分”（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 是 div 的 width 为 100%（由于 div 包装器，100% 等于 1600px）

【问题讨论】：

标签： image css responsive-design

【解决方案1】：

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

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

（或相反：50% 宽度加上自动最大宽度和高度）

【讨论】：