Question

我正在使用Bootstrap的网站上工作。我正在努力使这个网站在桌面和移动浏览器上都能运行。一切都在工作，除了我的横幅图片大小。

我的图像是640x480。我的图像定义如下：

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

在移动网页上，图片看起来就像我想要的那样。但是，在桌面上，图像宽度仅为320像素。但是，在桌面上，我希望图像尽可能宽。基本上，我想裁剪正确的部分。

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

谢谢！

Answer 1

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

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

    }
}

这应该可以将min-width更改为您的桌面大小。

更多信息here

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是网格bootstap上的宽度scala。请查看：https://getbootstrap.com/examples/grid/

我希望它是你想要的

Answer 4

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

这将解决它。

响应式设计 - 图像尺寸调整

4 个答案: