画像をトリミングせずにオーバーフローを隠すことなく、divの画像を中央に配置

Question

すべての画像をすべてのdivの中央に設定し、画像を切り取らずにオーバーフローを隠す必要があります。私は

• margin: auto 0;
• background-position: center;

と試みたが、何も働きません。

.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 

Answer 1

画像-50%は左に翻訳し、50%に左マージンを設定します。 translateXの除去から変換ホバー防ぐため

、それを更新します。

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>

Answer 2

私はautoに100%からmax-widthとheightを設定します。これがあなたが何をしているのかと願っています。

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