如何在不改变图像尺寸的情况下显示图像的某个方面？答案

【问题标题】：how do you display a certain aspect of an image without changing the dimentions of said image?如何在不改变图像尺寸的情况下显示图像的某个方面？
【发布时间】：2017-03-22 08:57:06
【问题描述】：

我的页面顶部有一个标题，当前正在覆盖图像。图片是残奥会跑步，我的网页是关于为什么截肢者需要继续参加运动。

我真的希望图片显示他正在跑步和假肢，但是当我插入图片时，它只显示了他的上半身。我想保持图像尺寸相同，因为它们跨越整个页面并且看起来不错，但我基本上只需要图像向上移动而不改变尺寸。

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

【问题讨论】：

请提供您的代码
你去，我为你添加了代码
好吧，如果您的 Header 具有非常宽的格式，例如 20:5，但您的图像格式不同（例如 16:9），则您无法将图像放入没有任何边框的标题中或裁剪图像的一部分。
@SamButch 谢谢，添加了我的建议

标签： html image css background

【解决方案1】：

我猜您正在寻找的是 background-position 属性 - 请参阅下面的演示，我已将其定位到 center：

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position:center;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

请参阅此参考：w3-shcools

您也可以使用百分比/像素指定 x 和 y 位置 - 请参阅下面的演示：

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position: 25% 25%;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

【讨论】：

@SamButch 让我知道您对此的反馈，谢谢！
这帮助很大！！ “背景位置：25% 25%”非常适合选择我想要的位！感激不尽！

【解决方案2】：

我在这里看到 3 个选项：

简单一：使用 css bg 位置属性，例如 background-position-y: bottom;
把这个 div 和height: 100%; 放在另一个 div 里面具有与width: 100%; 相同的图像并应用了模糊（因此您的图像将具有全高，其余空间将被相同的缩放和模糊图像覆盖）。你可以使用此参考进行模糊
http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS
使用标题的纵横比来保持图像比例 - 这里是此参考
https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

【讨论】：