如何使用对象贴合来调整图像的样式：封面仍然具有响应性

Question

我在设计的网站上设置图片样式时遇到问题。我想要构图，获得可见的特定尺寸，其余部分不可见。我一直在使用object-fit:cover和overflow: hidden。我对各种建议持开放态度。

以下是图片的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>

我之前使用过object-fit：cover，但这次图片有很多类，我不确定在哪个星座中使用它们。我正在使用wordpress模板，所以我无法更改HTML代码。

图像响应很重要 - 缩放尺寸。

以下是指向该网页的链接：

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

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

现在就是这样：

这就是我想要的结果：

    .so-widget-sow-image-default-bf8d3ff3bedb .sow-image-container .so-widget-image { 
display: block; width: 100%; 
} 

.so-widget-image { 
width: auto; height: 100%; 
} 
img { 
height: 100%; 
width: auto; 
}