在CSS中裁剪图像而不设置尺寸

时间:2018-05-03 20:53:13

标签: css sass

我知道object-fit: cover;是一种在css中裁剪图像的好方法,但是可以以相同的方式使用它,而无需指定尺寸吗?而只是让它填充到父元素的宽度?

2 个答案:

答案 0 :(得分:1)

background-size: cover;应该可以解决问题。

答案 1 :(得分:1)

您也可以使用object-fit: cover;。只需确保为图片指定width: 100%height: 100%即可。要使此解决方案起作用,父元素将需要具有已定义的高度,否则图像将按原样显示。

<p>Parent element with no dimensions (default width to 100%): will maintain image aspect ratio (all image is visible).</p>
<div>
  <img src="https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style="object-fit: cover; width: 100%; height: 100%;">
</div>
<p>Parent element with specified dimensions: image will cover the area.</p>
<div style="width: 300px; height: 100px;">
  <img src="https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style="object-fit: cover; width: 100%; height: 100%;">
</div>