Question

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

我有这个小部件的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;
}

这是我在测试程序小部件中的代码我隐藏在私人页面上的代码 -

<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区域中进行，所以我不能做任何会影响它的事情。我希望这是有道理的！我非常感谢任何帮助/提示/等。如果我需要显示任何其他代码段，请告诉我。

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

Answer 2

单独使用高度/宽度百分比会强制另一个保持比例并使其重新占据浏览器的宽度。

示例：

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

我希望我的问题是正确的，但如果我这样做了，应该这样做。

如何使图像裁剪并重新居中，因为浏览器宽度会发生变化

2 个答案: