物体贴合的响应式图像：封面

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/

以下是我想如何构图的图片：

这就是我想要的结果：

我在这里做了小提琴：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>