全部3？：响应图像大小调整+小图像的实际图像宽度+所有较大图像的最大宽度

时间：2014-07-17 作者：user2656065

我想要实现的是让图像响应性地调整大小，为此我必须设置“宽度：100%”，同时设置最大宽度，使图像的宽度不与内容的宽度相同

为此，我使用：

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}

#content img {
    max-width: 690px;
}
然后图像是有响应的–但问题是，如果图像宽度小于690px，则图像的宽度太大！

如果我只使用这个：

img {
    max-width: 100%;
    height: auto;
}
图像大小（宽度和高度）正确，但图像没有响应。

如何实现这三个目标？

如果所有较大图像的真实图像宽度小于690px的690px图像宽度，则响应调整实际图像的图像大小This is an image of which the actual image width is smaller than 690px and where you can see the problem.

我提出了一些解决方案，但由于这是更多的工作，而不是特定问题的适当解决方案，因此我将其添加到这里。

解决方法是对较小的窗口大小使用不同的css。对于较大的窗口：

img {
    max-width: 100%;
    height: auto;
       width: auto;         /* The image is made responsive further below for smaller windows (@ 800px) */
}

#content img {
    max-width: 690px;
}
对于较小的窗口：

@media only screen and (max-width: 890px) {
    img {
        width: 90%; /* to make the image responsive */
    }
}

4 个回复
最合适的回答,由SO网友:Bysander 整理而成

CSS

将以下代码添加到CSS文件中。这将使图像可根据屏幕大小进行缩放。

如果只想为特定的图像类进行设置，显然要更改class标记

img{ max-width: 100%; }

img{ -ms-interpolation-mode: bicubic; }

然后你需要运行一个过滤器来阻止wordpress自动向你想要的图像添加图像尺寸。

  function remove_wp_width_height($string){
  return preg_replace(\'/\\/i\', \'\',$string);
  }
然后，当您需要调用缩略图时，请在模板中调用，而不是使用the_post_thumbnail(); 像这样使用新功能

echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),\'large\'));

SO网友:Zammuuz

从您指定的应用于该图像的css属性的链接

#content img{ max-width:690px;}
img { width:100%;height:auto;}
这就是为什么更小的图像也在拉伸。将您的答案更新为：

img {
max-width: 100%;
height: auto;
width: auto;        /* to make the image responsive */
 }
#content { max-width:690px;}
检查此项fiddle

SO网友:Sumesh M.S

最简单的方法就是保持你现在的风格。只需使用像素或百分比限制容器。

例如：如果您限制您的图像大小-您的图像将一直延伸到那里，直到那里，再也不会延伸。

如果您的图像大小是200px-那么，请参阅下面的最终样式集。

#content {
    max-width: 200px;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}
有关更多详细信息，请参阅-Making responsive images

谢谢
Sumesh硕士

SO网友:kempes

我补充说，我是wordpress的初级用户，尤其是我的作品集。我也有同样的响应图像问题，在HTML/CSS原型图像中，like portfolio片段类似于“1000x650”，并进行了缩放。然而，在wordpress中，这不起作用。

所以我在google上找到了这期的原始海报worked 对我来说。

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}
#content img {
    max-width: 690px;
}

结束
标签： images   css   responsive   小码农  

相关推荐

有条件地为插件中的do_action()调用加载javascrip和css

我正在开发一个插件并使用do_action() 而不是在站点上显示插件内容的短代码。该插件将只由我使用，但我制作该插件是为了将网站的组件与主题本身分离。如果从插件在主题中调用了特定的do\\u操作，我将如何在页面上有条件地显示javascript和css？我发现了大量的短代码，但我想避免使用短代码，因为我将直接在主题中调用操作。我试过这样的add_action(\'wp_footer\', \'print_my_script\'); function print_my_script() {