Question

我有一个div容器，宽度约为600px。我在这个容器里面显示一个图像。我已经为图片提供了width:100%和height:'auto'。这没有问题，但是当我必须显示一个小图像（例如：宽度约50px）时，因为宽度设置为100％，它看起来很模糊。我怎样才能防止这种情况发生？我的想法是获得图像的宽度，如果它低于让我们说80px，图像宽度设置为较低的值。这样做是否正确？还是有更好的方法吗？

我的代码

<div className="home_post_sections">

    <img src={image} className="homepost_image"/>

</div>

CSS

.home_post_sections {

    width: 610px;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: white;

}

.homepost_image {

    width: 100%;

}

Answer 1

如果不影响，我希望我的div容器填充图像分辨率很高。

分辨率受影响程度 - 可接受多少模糊 - 是一种观点。浏览器不会为您做出此决定。

您可以在图片上使用max-width而不是width。这样，图像永远不会比它的原始分辨率更宽。因此，宽度为60像素的图像将占据容器的60px。

您还可以向图像添加display: block以删除容器底部的小条空白区域。 More info here.

＆＃13;

.home_post_sections {
  width: 610px;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  margin-bottom: 10px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: white;
}

.homepost_image {
  max-width: 100%;
  display: block;
}

＆＃13;

<div class="home_post_sections">
  <img src="https://unsplash.it/610" class="homepost_image" />
</div>
<div class="home_post_sections">
  <img src="https://unsplash.it/60" class="homepost_image" />
</div>

＆＃13;

宽度为100％时，低分辨率图像显得模糊

1 个答案: