php - 具有对象匹配的响应图像 :cover

Question

我想给图像加框，只让图像的 width:300px; 可见，其余宽度不可见。我一直在使用 object-fit:cover 和 overflow: hidden。但是我无法在图像响应 (width: 100%)，缩放尺寸的同时做到这一点。

这是图片的html代码:

<div id="pgc-1397-2-0" class="panel-grid-cell">
<div id="panel-1397-2-0-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
::before
<div class="so-widget-sow-image so-widget-sow-image-default-bf8d3ff3bedb">
<h3 class="widget-title">KRAGEN</h3>
<div class="sow-image-container">
<img src="http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31.jpeg"width="800" height="450" srcset="http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31-300x169.jpeg 300w, http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31-768x432.jpeg 768w, http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31.jpeg 800w" sizes="(max-width: 800px) 100vw, 800px" title="KRAGEN" class="so-widget-image"
</div>
</div>

这是网页链接:

http://www.ny.nordicredesigners.dk/

这是我想要如何构图的图片:

这就是我想要的结果:

我在这里做了 fiddle :https:www.jsfiddle.net/q2yrqvxv/5/

Answer 1

使用 CSS object-fit 和 object-position 属性控制图像纵横比允许您缩放图像和视频，就像使用 background-size 一样 和 background-position。

此外here您将获得文档和示例

img {
  width: 90vw;
  height: 75vh;
  border: 3px solid tomato;
  object-fit: cover;
  object-position: 0 0;
}


/* Demo styles only */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

<div>
  <img src="https://i.imgur.com/9Q9pgmR.jpg">
</div>