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

【问题标题】：Center-aligned divs, resizing images and transparent effects居中对齐的 div，调整图像大小和透明效果
【发布时间】：2018-05-07 21:59:14
【问题描述】：

我有这个页面：https://jsfiddle.net/pnLg2mrh/1/

我需要知道：

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

【问题讨论】：

标签： hover resize alignment center transparent

【解决方案1】：

你为什么不把图片设为background-image然后给background-size:cover：见sn-p

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

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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>

【讨论】：