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

我通过我和用户181934的代码解决了这个问题。此外，我使用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，调整图像大小和透明效果

3 个答案: