css - 响应式设计 - 图像大小调整

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 放在类中。
• 如果使用 HTML5 删除多余的 /
• 将您的 max- 更改为 min- regards height。
• 改变你的标准宽度:自动，改变你

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">