自适应设计-图像尺寸调整

Question

我正在使用Bootstrap的网站上工作。 我正在努力使该网站在台式机和移动浏览器上都能正常工作。 一切正常，除了我的横幅图像尺寸。

我有一个640x480的图片。 我有这样定义的图像：

<img alt="My Picture" src="/wwwroot/img/banner.jpg" style="height: auto; max-height:320px; max-width: 100%;" /> 

在移动页面上，图像看起来就像我想要的。 但是，在桌面上，图像只有320px宽。 但是，在桌面上，我希望图像尽可能宽。 基本上，我想裁剪合适的部分。

有没有办法用CSS做到这一点？

谢谢！

Answer 1

使用媒体查询来定位css文件中的img：

@media only screen and (min-width : 320px) {
    img {
       width:100%!important;

    }
}

将min-width更改为桌面大小应该可以工作。

更多信息在这里

Answer 2

• 将CSS放在一个类中。
• 如果使用HTML5，请删除多余的/
• 将最大高度更改为最小高度。
• 更改标准宽度：自动更改为

CSS：

.imageFun {
    height: auto; 
    min-height:320px; 
    width:100%;
    /* this is actually no longer needed but kept for posterity */
    max-width: 100%;     
}

HTML：

<img alt="My Picture" src="/wwwroot/img/banner.jpg" class="imageFun"> 

Answer 3

在twitter-bootstrap上，您可以将div与类响应宽度一起使用：

<div class="col-md-12 col-sm-12 col-xs-12">
    <img alt="My Picture" 
          src="/wwwroot/img/banner.jpg" 
          style="height: auto; width: 100%;" 
    /> 
</div>

其中值12是网格引导上的宽度标量。 请查看： https : //getbootstrap.com/examples/grid/

我希望你想要什么

Answer 4

您正在使用Booststrap，因此请删除内联样式并添加class="img-responsive col-xs-12 sensitive class="img-responsive col-xs-12

这将解决它。