Question

我想创建一个响应式图像，它占据视口的整个高度，并随着视口的变化而缩放。

我知道我可以用这个来设置高度：

height: 100vmax;

但是，我无法理解如何更改图像宽度并有效地裁剪它的边缘，以使图像保持水平居中。

一个很好的例子是Big Green Egg's website虽然他们使用视频但我想使用图片。

值得一提的是，我需要将此代码输入CMS页面（Magento 2），以便它位于一组其他DIV中。

Answer 1

尝试使用＆＃34; vh＆＃34;并在外部容器上使用text-align来使图像居中：

＆＃13;

body {
  text-align: center;
}

img {
  height: 100vh;
}

＆＃13;

<img src="http://kingofwallpapers.com/sexy-girl-wallpapers/sexy-girl-wallpapers-002.jpg">

＆＃13;

但我建议使用背景图片，因为它是设计的一部分，而不是内容：

＆＃13;

* {
  margin: 0;
}

.image {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e0eaec url(http://eskipaper.com/images/mikako-zhang-5.jpg) no-repeat center center / auto 100%;
}

h1 {
  line-height: 50px;
  text-align: center;
}

＆＃13;

<h1>&lt;header&gt; goes here</h1>
<div class="image"></div>

＆＃13;

Answer 2

ciao

在这里，我将非常简单，使用基于css的解决方案，该解决方案基于仅添加object-fit和可选的object-position，当调整的主要点不在图片中心时非常有用

html

<img src="https://images.unsplash.com/photo-1518453850752-056b15f0a4ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">

css

img {
  float: left;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 75% 75%;
}

在此JSFiddle中尝试减小图片的宽度：您将看到焦点始终保持在圆顶周围。我建议也阅读this gem

默认情况下，object-position: 50% 50% [即图片的中心]，因此在这种情况下，您无需指定图片

注意-您可以在不同的浏览器here

上查看其支持

祝你有美好的一天，
安东尼诺

CSS：在保持宽度100％的同时设置视口的图像高度，如果比视口宽，则裁剪边缘

2 个答案: