图像高度和宽度 - 如何在不更改另一个的情况下锁定一个？

Question

我似乎对图像有一些问题。当我修改最大高度时，它没有坚持相同的宽度，如下所示。

.lead-pic img {
  background-size: cover;
  margin-left: -150px;
  max-height: 1000px;

我想要实现的是覆盖页面两侧并同时降低图像高度的图像。我不确定在更改高度像素时是否有一些代码可以锁定宽度。

以下是我更改高度时的含义截图：

这是在暂存环境中的wordpress上，因此我无法提供网站的URL。有什么想法吗？

Answer 1

您只能将一个属性设置为height或width。如果同时设置图像将模糊，则纵横比与原始图像不同。尝试将图像在一个元素集属性中包装到该包装元素，并将max-width: 100%;指定给图像标记。

Answer 2

如果我在这个问题上没有错，如果您使用background-size属性，则不会在HTML文件中编码的图像中使用它。为此，您需要刊登background: url(link/to/image.png)

.lead-pic {
  background: url(link/to/image.png);
  background-position: top;
  background-size: cover;
  margin-left: -150px;
  max-height: 1000px;

示例：

.lead-pic {
  background: url(http://lorempixel.com/400/200);
  background-position: top;
  background-size: cover;
  height: 300px;
  width: 450px;
}

<div class=lead-pic></div>

希望这会有所帮助。如果我错了，请纠正我:)。

Answer 3

如果您想将其作为背景并自动调整大小，请尝试固定图像位置，并将您的内容放在div中，位置为：absolute。使用vh和vw设置大小。 vh和vw是当前视口高度（vh）或宽度（vw）的百分比。

，即：高度：100vh =当前视口高度的100％。

.lead-pic {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

.content-example {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vh;
}

<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />

<div class="content-example">
  All of your content can go here.
</div>

请记住，这会拉伸图像而忽略纵横比，从而降低质量。如果要保持图像质量，请在最短尺寸方向上将其设置为100vh / vw（在这种情况下，宽度：100vw）。以下代码段仅展开图像宽度：

在对应之后添加 这会让你知道你想要它的div。如果你想添加视差功能，我建议搜索“Pure CSS parallax”

.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}

<br><br><br>

<div class="lead-pic-container"></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 4

解决。

使用来自堆栈溢出用户的组合信息，这是答案：

.lead-pic {
  background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
  background-size: cover;
  height: 900px;
  width: 2000px;
  margin-left: -220px;
  background-position: 50% center;
}

.move-pic {
  padding: 120px;
  height: 1000px;
  width: 100%;
}