max-width et max-height sur l'image d'arrière-plan

Question

Je veux afficher une image d'arrière-plan tout en survolant l'image normale. Ils doivent tous deux avoir la même hauteur et la même largeur. J'ai pensé le faire fonctionner en donnant le div avec l'image d'arrière-plan display: inline-block pour qu'il prenne la même taille que l'image, mais cela fait que le width: 100% et le height: 100% de l'image s'arrêtent car ils essaient de prendre 100% de la largeur de l'élément inline-block.

Comment puis-je rendre le background-image de la même taille que le image tout en conservant les valeurs de height et width comme ..% du div .box.

.box{
  width: 500px;
  height: 400px;
  border: 1px solid black;
  text-align: center;
}

.around-image{
  background: url(http://via.placeholder.com/600x400) no-repeat center;
  background-size: cover;
  display: inline-block;
}

img{
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
  opacity: 1;
  vertical-align: middle;
}

.helper{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}   

img:hover{
  opacity: 0;
}

<div class="box">
  <div class="around-image">
    <span class="helper"></span><img src="http://via.placeholder.com/300x200">
  </div>  
</div>

Éditer
background-image max-height max-width

Est-il possible de définir max-height ou max-width sur un background-image?

.box{
  margin: 30px;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  text-align: center;
  background: url(http://via.placeholder.com/300x200) no-repeat center;
  background-size: cover;
  position: relative;
}

.box:hover{
  background: url(http://via.placeholder.com/200x300) no-repeat center;
}

.height p{
  position: absolute;
  left: -60px;
  top: 45%;
  -webkit-transform: rotate(-90deg);
}

.width p{
  position: absolute;
  left: 40%;
  top: -40px;
  -webkit-transform: rotate(0);
}

<div class="box">
  <div class="height">
    <p>height: 200px</p>
  </span>
  <div class="width">
    <p>width: 400px</p>
  </span>
</div>

Comme vous le voyez, l'image 300x200 est étirée sur une zone de 400x200. Je ne veux pas que l'image s'étire.

html css

0

Minegolfer 27 nov. 2017 à 13:14

Answer 1

Pour éviter l'étirement de l ' image , remplacez simplement la valeur de la background-size propriété par contain:

.box {
  background-size: contain;
}

.box {
  margin: 30px;
  width: 400px;
  height: 200px;
  border: 1px solid;
  text-align: center;
  background: url(http://via.placeholder.com/300x200) no-repeat center;
  background-size: contain;
  position: relative;
}

.box:hover {
  background: url(http://via.placeholder.com/200x300) no-repeat center;
}

.height p {
  position: absolute;
  left: -60px;
  top: 45%;
  -webkit-transform: rotate(-90deg);
}

.width p {
  position: absolute;
  left: 40%;
  top: -40px;
  -webkit-transform: rotate(0);
}

<div class="box">
  <div class="height">
    <p>height: 200px</p>
  </div>
  <div class="width">
    <p>width: 400px</p>
  </div>
</div>

1

VXp 4 sept. 2018 à 20:12

Answer 2

Vous pouvez utiliser quelque chose comme ça -

#target {
  width: 200px;
  height: 200px;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRN_bhuF3l7rhMNNBk4lgEoOp2qnB2TAJd5h_rVGtsWzZ0K0uzs');
}

#target:hover {
  background: url('http://3.bp.blogspot.com/-KdSQjJhV4jI/TpMRe96ndUI/AAAAAAAACfQ/BC6ZMvbp_DA/s1600/gerbera-elegant-flowers-9.jpg');
}

<div id="target"></div>

Ajustez les propriétés css d'arrière-plan en fonction de vos besoins.

0

dbigpot 27 nov. 2017 à 10:32

Answer 3

Vous pouvez essayer d'utiliser background-size:cover

.box{
  width: 500px;
  height: 400px;
  border: 1px solid black;
  text-align: center;
}

.around-image{
  background: url(http://via.placeholder.com/300x200/ff0000) no-repeat center;
  background-size: cover;
  display: inline-block;
}

img{
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
  opacity: 1;
  vertical-align: middle;
}

.helper{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}   

img:hover{
  opacity: 0;
}

<div class="box">
  <div class="around-image">
    <span class="helper"></span><img src="http://via.placeholder.com/300x200">
  </div>  
</div>

0

Maneesh 27 nov. 2017 à 10:20

max-width et max-height sur l'image d'arrière-plan

3 réponses

Questions connexes

De nouvelles questions

html