中央揃えのdiv、リサイズ画像や透明効果が

私はこのページを持っている彼らは、それぞれ黄色のブロック内に収まるように中央揃えのdiv、リサイズ画像や透明効果が

自動的に画像のサイズを変更する方法
黄色のブロックを含むように青色の境界線divを自動的にサイズ変更する方法
青色の境界線内の黄色のブロックを中央に揃える方法

<div class="container"> 
<div class="block"> 
    <a href="https://imgur.com/BTMfPIm.jpg"> 
     <img src="https://imgur.com/BTMfPIm.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div> 
<div class="block"> 
    <a href="https://imgur.com/eoSvnK8.jpg"> 
     <img src="https://imgur.com/eoSvnK8.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div> 
<div class="block"> 
    <a href="https://imgur.com/u1gFAvc.jpg"> 
     <img src="https://imgur.com/u1gFAvc.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div>

.container { 
    border: 9px solid #55f; 
    width: 88%; 
    height: 40px; 
    margin: 0 auto; 
} 
.block { 
    position: relative; 
    width: 18%; 
    height: 300px; 
    border: 9px solid red; 
    float: left; 
    margin: 25px; 
} 
.img { 
    display: block; 
} 
.shade { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    background-color: rgba(225,255,0,0.7); 
}

出典

2017-11-23 Luigi P.

私は問題を解決し、私とuser181934のコードを解決しました。さらに、私は要素を中央に置くために正当化コンテンツと整列アイテムを使用しました。
これはjsfiddleに結果である：ここではhttps://jsfiddle.net/pnLg2mrh/23/

フルコード：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    background: -webkit-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -o-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -ms-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -moz-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: linear-gradient(to right, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    width: 72%; 
    height: 100px; 
    margin: 0 auto; 
    margin-top: 160px; 
    } 
.block { 
    align: center; 
    position: relative; 
    width: 19%; 
    border: 3px solid black; 
    -webkit-border-radius: 33px; 
    -moz-border-radius: 33px; 
    border-radius: 33px; 
    float: left; 
    margin: 6px; 
    } 
.img { 
    width: 100%; 
    display: block; 
    border-radius: 31px; 
    } 
.shade { 
    position: absolute; 
    border-radius: 30px; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    transition: .9s ease; 
    background-color: rgba(225,0,0,0.8); 
    } 
.block:hover .shade { 
    opacity: 0; 
    } 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="block"> 
     <a href="https://imgur.com/M6gGG7x.jpg"> 
      <img src="https://imgur.com/M6gGG7x.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
    <div class="block"> 
     <a href="https://imgur.com/kfpD5cv.jpg"> 
      <img src="https://imgur.com/kfpD5cv.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
    <div class="block"> 
     <a href="https://imgur.com/YlbMNNw.jpg"> 
      <img src="https://imgur.com/YlbMNNw.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
</div> 

</body> 
</html>

出典

2017-11-24 09:51:06

なぜあなたはbackground-imageとしてイメージを作成し、その後background-size:coverを与えるいけない：参照スニペット

あなたがのためにフレックスボックスを使用することができます

.container { 
 
\t border: 9px solid #55f; 
 
\t width: 88%; 
 
\t height: 40px; 
 
\t margin: 0 auto; 
 
} 
 
.block { 
 
\t position: relative; 
 
\t width: 18%; 
 
\t height: 300px; 
 
\t border: 9px solid red; 
 
\t float: left; 
 
\t margin: 25px; 
 
} 
 
.img { 
 
\t display: block; 
 
    width:100%; 
 
} 
 
.velo { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    opacity: 1; 
 
    transition: .9s ease; 
 
    background-color: rgba(225,255,0,0.7); 
 
} 
 
.container .block { 
 
    background-size:cover; 
 
} 
 
.container .block:nth-child(1){ 
 
    background-image:url('https://imgur.com/BTMfPIm.jpg'); 
 
} 
 
.container .block:nth-child(2){ 
 
    background-image:url('https://imgur.com/eoSvnK8.jpg"'); 
 
} 
 
.container .block:nth-child(3){ 
 
    background-image:url('https://imgur.com/u1gFAvc.jpg'); 
 
}

<div class="container"> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/BTMfPIm.jpg"> 
 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/eoSvnK8.jpg"> 
 
\t 
 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/u1gFAvc.jpg"> 
 

 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
</div>

出典

2017-11-23 22:31:18 M0ns1f

この。ように：

.container { 
    display: flex; 
    border: 9px solid #55f; 
    width: 88%; 
    margin: 0 auto; 
} 
.block { 
    position: relative; 
    flex-grow: 1; 
    border: 9px solid red; 
    float: left; 
    margin: 25px; 
} 
.img { 
    display: block; 
    width: 100%; 
} 
.velo { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    transition: .9s ease; 
    background-color: rgba(225,255,0,0.7); 
}

出典

2017-11-23 22:36:33

中央揃えのdiv、リサイズ画像や透明効果が

答えて

関連する問題