居中对齐的 div、调整图像大小和透明效果

Question

我需要知道：

如何自动调整图像大小以适合每个黄色块
如何使蓝色边框 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);
}

Answer 1

你为什么不把图片做成 background-image 然后给 background-size:cover ：见片段

.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;
  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">
 <div class="block">
  <a href="https://imgur.com/BTMfPIm.jpg">
   <div class="velo"></div>
  </a>
 </div>
 <div class="block">
  <a href="https://imgur.com/eoSvnK8.jpg">
 
   <div class="velo"></div>
  </a>
 </div>
 <div class="block">
  <a href="https://imgur.com/u1gFAvc.jpg">

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

Answer 2

您可以为此使用弹性框。像这样：

.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);
}

Answer 3

我解决了我和 user181934 的代码交叉问题。此外，我使用 justify-content 和 align-items 使元素居中。
这是 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>

居中对齐的 div、调整图像大小和透明效果

Center-aligned divs, resizing images and transparent effects

hover

resize

alignment

center

transparent