屏幕分辨率css上的图像大小

Question

在我Website上有大图片（缩略图）。在我的大屏幕（1920 x 1080）上，它们看起来很棒。但在我的小屏幕（1280 x 1024）上看起来很糟糕。标准尺寸为856px。如果屏幕无法处理，我希望缩略图会更小。一些代码：

article .wp-post-image {
width: 856px;
height: auto;
margin-left: 0px;
margin-top: 3px;
float: left;

}

Answer 1

使图像响应地行动（即将图像的尺寸调整到容器的大小）， 添加max-width: 100%;文章.wp-post-image

Answer 2

试试这个

article .wp-post-image {
    float: left;
    height: auto;
    margin-left: 0;
    margin-top: 3px;
    max-width: 100%;
    width: 856px;
}

或

 article .wp-post-image {
        float: left;
        height: auto;
        margin-left: 0;
        margin-top: 3px;            
        width: inherit;
    }

或

  article .wp-post-image {
            float: left;
            height: auto;
            margin-left: 0;
            margin-top: 3px;            
            width: 785px;
        }

Answer 3

这是anwser：

article .wp-post-image {
float: left;
height: auto;
margin-left: 0;
margin-top: 3px;
max-width: 100%;
width: 856px;