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

Question

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

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

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

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

Answer 1

使用

max-width: 100%;

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

Answer 2

不需要为这种特定情况使用媒体查询：只需定义

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

这将确保每个视口宽度最大为400px

的全宽图像

Answer 3

您需要指定min和max：

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

CSS ：

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

尝试更改小提琴中的面板大小。当屏幕尺寸过低时，min-height将确保最小可接受的尺寸。 max-height将确保最大尺寸，以免变大。

100％宽度将使其保持在界限范围内。

Answer 4

通过使用css3媒体查询，你可以做到可能

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

或

 img{ max-width:100%}

或者您可以在媒体要求之前使用.. 'img{ max-width:100%}'这两个地方