Html 如何在浏览器宽度更改时裁剪图像并重新居中

我有一个自定义窗口小部件区域，带有Visual Editor插件设置，因此我可以在标题区域进行促销或其他任何操作

我有这个小部件的CSS类。它们控制背景img等

我的老板告诉我，他希望这些图像能够响应，但事实证明，他真正的意思是，他希望这些图像能够随着浏览器宽度的变化而裁剪并重新居中。就像在这个视频中，这是从主页上拍摄的

我的标题区域小部件可以在这里看到-

缩小浏览器时，您会看到图像会适当地重新调整大小。然而，我的老板希望它保持相对较大，这样你仍然可以阅读文本（因此裁剪），但也可以重新居中

我查看了主页，发现是一个媒体查询控制了这一点，所以我尝试在CSS中设置的.responsive图像中使用这些内容-

.responsive-image {
  width: auto;
  max-width: none;
  height: 100%;
  position: relative;
  transition:all .2s ease;
}

这是我正在做的tester小部件中的代码，它隐藏在一个私有页面上-

<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget"><div class="responsive-image"><div 
class="days100-background-header-widget days100-background-header-widget-
image-background"></div></div></a>

它只是完全不加剪辑地显示图像。我无法共享此链接，因为我没有足够的声誉点数

---

所以我的问题是-我如何在小部件的div中完成首页上发生的事情。这可能吗？我试着用滑块中使用的img设置来做一个div类，但也不起作用。所有的CSS都放在主页的附加CSS区域，所以我不能做任何会影响它的事情。我希望这是有意义的！非常感谢您的帮助/提示等。如果需要显示任何其他代码片段，也请告诉我。

您要查找的是背景图像

您需要做的是将图像用作容器内的背景。然后通过css调整元素

它看起来像：

div.image-background{
   position: relative;
   background: url('') top center no-repeat;
   background-size: cover;
   width: 100%;
   height: 200px;
}

你调整其余的，因为它适合你的工作

参考资料：

---

仅使用高度/宽度百分比将迫使另一个保持比例，并使其与浏览器的宽度相适应

例如：

.responsive-image {
  width: 30%;
  position: relative;
  transition:all .2s ease;
}

---

我希望我正确地回答了你的问题，但如果我这样做了，我应该这样做。

@AmandaRosen很高兴这样做了。我添加了一些参考资料，它们是获得更多CSS知识的非常好的参考资料。谢谢！我去看看。我正在努力学习尽可能多的东西，所以我很感激那些推荐信！