【问题标题】:Crop image from the left side when scaling window size缩放窗口大小时从左侧裁剪图像
【发布时间】:2021-03-31 23:48:38
【问题描述】:

当前情况:我正在使用引导程序,并且有 2 列彼此相邻。当我缩放浏览器窗口时,图像会随之缩放。

Section on a large display

Section on a smaller screen

问题:当我缩放浏览器窗口时,我正在处理的图像响应式缩放。

我想要什么:确保图像与 div 保持全高并从左侧裁剪。

【问题讨论】:

  • 尝试在你的img标签中使用object-fit: cover;

标签: html css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

在最简单的情况下,您可以将图像显示为背景并使用各种属性来确保它始终固定在右侧,全高,因此随着窗口尺寸的减小从左侧裁剪。

.image {
  width: 50vw;
  height: 50vh;
  background-image: url(https://i.stack.imgur.com/SepTG.png);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat no-repeat;
}
<div class="image"></div>

注意:对于更现代的浏览器,您可以考虑使用 img 元素和 object-fit 代替,但这不适用于 Internet Explorer。

【讨论】:

  • 感谢您的回复。我试图将其作为背景图像,但遗憾的是这不起作用。这是一个 Shopify 模板,我可以在 html 中更改的内容受到限制。
  • 您好,您需要发布最少的 HTML 以显示当时的情况。您是否按照我在答案中的建议尝试了对象拟合?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-08-28
  • 1970-01-01
  • 1970-01-01
  • 2015-02-18
  • 2023-03-22
  • 2016-08-29
  • 2017-06-18
相关资源
最近更新 更多