Question

我在移动主题的博客文章中调整图像时遇到问题。不知何故，他们搞乱了布局。我在文章中使用以下代码作为图像。

<div class="leftbox">
    <img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" />
</div>

<div style="text-align: center">
    <img src="mysite.net/blog/media/Mayank/Surfing_in_France.jpg" width="520" height="347" alt="Surfing in France" title="Surfing in France" />
</div>

我添加了这些代码以确保图片不会改变宽度，但似乎它们无效。

.post_content img {
    height: auto !important;
    max-width: 100% !important;
}


.leftbox img {
    height: auto !important;
    max-width: 100% !important;
}

这是图片在移动设备上展开的链接示例 - http://www.easydestination.net/blog/item/surfing-holidays-in-france

Answer 1

删除内联代码中的高度/宽度声明。

＆＃13;

<div class="leftbox"><img
src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" alt="Indian tourists" title="Indian tourists" /></div>

＆＃13;

Answer 2

您需要使用css覆盖这两个维度。

img {
      width: auto!important;
      height: auto!important;
      max-width: 100%!important;
      max-height: 100%!important;
    }

<img src="http://placehold.it/900x500" width="900" height="500" />

用于移动网站的CSS调整图像大小

2 个答案: