html - 如何在浏览器宽度变化时裁剪图像并重新居中

Question

我有一个带有可视化编辑器插件设置的自定义小部件区域，因此我可以在标题区域中进行促销或其他操作。

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

我的老板告诉我他希望图像具有响应性，但事实证明他真正的意思是他希望它们随着浏览器宽度的变化而裁剪和重新居中。喜欢这个视频home page slider cropping/re-centering ，这是从主页上截取的。

我的页眉区域小部件可以在这里看到 - 100daysofrealfood.com/carrot-almond-recipe

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

我检查了主页，我可以看到它是一个控制它的媒体查询，所以我尝试在我的 CSS 中设置的 .responsive-image 中使用相同的东西 -

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

这是我在我正在做的测试器小部件中的代码，它隐藏在一个私有(private)页面上 -

<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 中完成首页上发生的事情。这可能吗？我试图用 slider 中使用的 img 设置做一个 div 类，但也没有用。所有用于此的 CSS 都在主页的附加 CSS 区域中，所以我不能做任何会影响它的事情。我希望这是有道理的!我真的很感谢任何帮助/提示/等。如果我需要显示任何其他代码片段，也请告诉我。

Answer 1

您正在寻找的是背景图像。

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

它看起来像:

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

您可以根据自己的工作调整其余部分。

引用资料:

How TO - Full Page Image

Perfect Full Page Background Image