如何使图像在浏览器宽度更改时裁剪和重新居中
我有一个带有可视化编辑器插件设置的自定义窗口小部件区域，所以我可以在标题区域做促销或其他任何事情。
我有这个小部件的CSS类。它们控制背景img等。
我的老板告诉我，他希望图像具有响应性，但事实证明，他的实际意思是希望它们随着浏览器宽度的变化而裁剪和重新居中。就像在这个视频home page slider cropping/re-centering中，这是从主页上拍摄的。
我的页眉区域小部件可以在这里看到- 100daysofrealfood.com/carrot-almond-recipe
当您缩小浏览器时，您会看到图像相应地调整了自身的大小。然而，我的老板希望它保持相对较大的大小，这样你仍然可以阅读文本(因此裁剪)，但也可以重新居中。
我检查了主页，我可以看到它是一个控制这一点的媒体查询，所以我尝试在我的CSS中设置的.response-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-class，但也不起作用。所有的CSS都在主页的附加CSS区域，所以我不能做任何会影响它的事情。我希望这是有意义的！我真的很感谢任何帮助/提示/等。如果我需要显示任何其他代码片段，也请让我知道。
回答 2
Stack Overflow用户
发布于 2017-04-22 02:31:48
你要找的东西是背景图像。
您需要做的是将图像用作容器内的背景。然后通过css调整你的元素。
它看起来像这样：
div.image-background{
position: relative;
background: url('') top center no-repeat;
background-size: cover;
width: 100%;
height: 200px;
}您可以根据您的工作情况调整其余部分。
参考文献：
Stack Overflow用户
发布于 2017-04-22 03:22:15
单独使用高度/宽度的百分比将强制另一个保持成比例，并使其与浏览器的宽度相对应。
示例：
.responsive-image {
width: 30%;
position: relative;
transition:all .2s ease;
}我希望我正确地回答了你的问题，但如果我这样做了，那么这应该是正确的。
https://stackoverflow.com/questions/43554479
复制
相似问题
使用特权帐户重置AD用户帐户密码
在Meteor帐户中重置密码后禁用登录-密码
用户在更改密码后将被注销。
编辑用户的帐户详细信息
Django:帐户创建后密码重置的无效令牌
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
