调整移动网站中的图像大小

Question

我在调整移动网站的图片尺寸方面遇到了麻烦。不幸的是，图像会拉伸屏幕的宽度。这个问题出现在我网站的博客上。

博客软件为图像生成此代码，声明宽度/高度，遗憾的是我无法更改。因此我希望用CSS文件覆盖它们。

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

我尝试使用以下代码覆盖图像大小以适应屏幕，但它无法正常工作。

我使用此css代码覆盖左框的浮动图像。

@media screen and (max-device-width: 640px) { 
.imgLeft { 
    float:none; 
    margin:0; 
} 

}

这是适合屏幕中图像大小的代码。

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

}

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

}

由于某些原因，这些代码都没有在我的网站上运行 - http://www.easydestination.net/blog/。通过移动浏览器查看博客以了解。如何防止图像拉伸屏幕。

Answer 1

基本上，您所要做的就是添加一个媒体查询，相应地减小图像大小，尝试：

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    .leftbox img {
        width: 400px;
        height: 300px;
    }
}

然后你可以看到这个：

Answer 2

@media screen and (max-device-width: 640px) { 
.leftbox { 
    float:none; 
    margin:0; 
} 

这是你的解决方案，而不是

@media screen and (max-device-width: 640px) { 
.imgLeft { 
    float:none; 
    margin:0; 
} 

所以用.leftbox替换.imgLeft，你就会得到你想要的东西。

编辑： 由于页脚，你仍然会有水平滚动。 删除保证金：0-10px;从页脚，所以：

@media screen and (max-device-width: 640px) { 
.leftbox { 
    float:none; 
    margin:0; 
} 
.footer{
margin:0;
}