comment afficher un certain aspect d'une image sans modifier les dimensions de cette image ?

Question

J'ai un en-tête en haut de ma page qui est actuellement recouvert d'une image. paralympien La course à pied et ma page web expliquent pourquoi les amputés doivent continuer à faire du sport.

Je voudrais vraiment que l'image le montre en train de courir et avec ses prothèses de jambes, mais lorsque j'insère l'image, elle ne montre que la moitié supérieure de l'homme. Je veux garder les mêmes dimensions d'image car elles couvrent toute la page et ont l'air bien, mais j'ai juste besoin que l'image se déplace vers le haut sans changer les dimensions.

.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>

Answer 1

Je suppose que ce que vous recherchez est background-position voir la démo ci-dessous où je l'ai positionné sur la propriété 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>

Voir cette référence : w3-shcools

Vous pouvez spécifier x y y les positions également en utilisant des pourcentages / pixels - voir la démo ci-dessous :

.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>

Answer 2

Je vois ici trois options :

• la plus simple : utiliser la propriété css bg position, par exemple. background-position-y: bottom;
• mettre cette div avec height: 100%; à l'intérieur d'une autre div qui aura aura la même image avec width: 100%; et avec un effet de flou (votre image aura donc toute sa hauteur et le reste de l'espace sera couvert par la même image mise à l'échelle et floue). vous pouvez utiliser cette référence pour le flou
  http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS
• utiliser le ratio d'aspect pour l'en-tête afin de maintenir les proportions de l'image. la référence pour cela
  https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/