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

Question

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

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

}

Answer 1

为了使图像响应（即调整它的尺寸以适应容器的大小），添加 max-width: 100%; 文章 .wp-post-图片

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

这是答案：

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

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

Image size on screen resolution css

css

wordpress

thumbnails

screen-resolution

image-size