我正在处理图像,我遇到了纵横比问题。

<img src="big_image.jpg" width="900" height="600" alt="" />

如您所见,高度和宽度已经指定。我为图像添加了CSS规则:

img {
  max-width: 500px;
}

但对于big_image.jpg,我得到的宽度=500,高度=600。如何设置图像的大小,同时保持其纵横比。


当前回答

要保持响应图像,同时仍然强制图像具有一定的纵横比,可以执行以下操作:

HTML格式:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

和SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

无论作者上传的图像大小如何,这都可以用于强制执行特定的纵横比。

感谢@Ksesohttp://codepen.io/Kseso/pen/bfdhg.查看此URL以了解更多比率和工作示例。

其他回答

要强制图像符合精确的大小,您不需要编写太多代码。太简单了

国际货币基金组织{宽度:200px;高度:自动;对象拟合:包含;/*按图像大小调整徽标*/-o-object-fit:contain;/*为opera浏览器安装徽标*/对象位置:顶部;/*设置徽标位置*/-o对象位置:顶部;/*opera浏览器的徽标位置*/}<img src=“http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png“alt=”徽标“>

您可以使用此选项:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

要保持响应图像,同时仍然强制图像具有一定的纵横比,可以执行以下操作:

HTML格式:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

和SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

无论作者上传的图像大小如何,这都可以用于强制执行特定的纵横比。

感谢@Ksesohttp://codepen.io/Kseso/pen/bfdhg.查看此URL以了解更多比率和工作示例。

删除“height”属性。

<img src="big_image.jpg" width="900" alt=""/>

通过指定这两个选项,可以更改图像的纵横比。只需设置一个即可调整大小,但保持纵横比。

(可选)限制过大:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

只需将此添加到css中,它将自动收缩和扩展,并保持原始比例。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}