如果屏幕不够宽，如何使用 CSS 有条件地调整图像大小？答案

【问题标题】：How to conditionally resize image if screen not wide enough, with CSS?如果屏幕不够宽，如何使用 CSS 有条件地调整图像大小？
【发布时间】：2014-02-05 08:53:14
【问题描述】：

假设我有一个 400 像素宽和 250 像素高的图像。用户调整屏幕大小或在智能手机上加载页面。

假设屏幕宽度为 320 像素宽。 400 像素的图片不适合。

有没有办法在屏幕不够宽时使用 CSS 自动调整图像大小（并保持比例）？

换句话说，图像应该从 400px 宽调整到 320px 宽（例如）。

【问题讨论】：

您可以为此使用媒体查询
但是媒体查询需要固定断点...
把 width="100%" 放到你的 <img> 标签中

标签： html css image resize width

【解决方案1】：

您需要同时指定最小值和最大值：

演示：http://jsfiddle.net/abhitalks/Vv9RT/

css：

img {
    min-width: 220px;
    max-width: 420px;
    width: 100%;
}

尝试更改小提琴中的面板大小。 min-height 将确保屏幕尺寸过小时可接受的最小尺寸。 max-height 将确保最大尺寸，使其不会变得太大。

100% 宽度将保持在范围内。

【讨论】：

【解决方案2】：

通过使用 css3 媒体查询，您可以实现

ex: @media screen (max-width:480px){
      img{
           width:320px;
     }
}

或

 img{ max-width:100%}

否则你可以同时使用这两个..'img{ max-width:100%}' 在媒体查询之前放置

【讨论】：

【解决方案3】：

对于这种特定情况无需使用媒体查询：只需定义

#yourimage {
   width: 100%;
   max-width: 400px;
}

这将确保每个视口宽度不超过 400 像素的全宽图像

【讨论】：

【解决方案4】：

使用

max-width: 100%;

Google 响应式图片了解更多信息。 http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

【讨论】：