Centrage des images dans une div sans rogner les images et masquer le débordement

Je dois définir chaque image au centre de chaque div et masquer le débordement, sans rogner les images. J'ai essayé avecCentrage des images dans une div sans rogner les images et masquer le débordement

margin: auto 0;
background-position: center;

mais rien ne fonctionne.

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
\t background-position: center; 
 
    height: 90%; 
 
    overflow: hidden; 
 
    transition: all .5s; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
\t height: 100%; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label{ 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link1.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 1</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link2.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 2</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link3.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 3</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
</div>

enter code here

Source

2017-06-18 Spolli

Traduire l'image -50% à gauche, et définir la marge de gauche à 50%.

Pour éviter le vol stationnaire transform d'enlever la translateX, mettez à jour à:

transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1);

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
    display: inline-block; 
 
    height: 90%; 
 
    transition: all .5s; 
 
    transform: translateX(-50%); 
 
    margin-left: 50%; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
    height: 100%; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label { 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
    <div class="column"> 
 
    <a href="http://link1.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 1</div> 
 
    </a> 
 
    </div> 
 
    <div class="column"> 
 
    <a href="http://link2.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 2</div> 
 
    </a> 
 
    </div> 
 
    <div class="column"> 
 
    <a href="http://link3.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 3</div> 
 
    </a> 
 
    </div> 
 
</div>

Source

2017-06-18 21:04:10

Merci beaucoup. J'ai une autre question ... Il est possible de définir oblique div comme [this] (https://i.stack.imgur.com/U2MVD.jpg) – Spolli

Essayez ['transform: skew'] (https: // développeur. mozilla.org/en-US/docs/Web/CSS/transform-function/skew). –

Je mis max-width-100% et height à auto. J'espère que c'est ce que vous recherchez.

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
\t background-position: center; 
 
    height: auto; 
 
    overflow: hidden; 
 
    transition: all .5s; 
 
    max-width: 100%; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
\t height: auto; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label{ 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link1.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 1</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link2.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 2</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link3.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 3</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
</div>

Source

2017-06-18 21:10:40 Gerard

Centrage des images dans une div sans rogner les images et masquer le débordement

Répondre

Questions connexes