如何删除div行之间的多余空白并使所有div图像变为方形? [英] How to remove extra white space between div rows and make all div images square size?
本文介绍了如何删除div行之间的多余空白并使所有div图像变为方形?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在iPhone上显示该页面时，我为ios设备创建了以下页面，每行底部都有多余的空白！我不知道如何删除每行之间的多余空白(每行有3张图像)以及如何使所有图像具有相同的大小(方形)，如果您能帮助我，我将不胜感激.谢谢
a {
text-decoration: none;
color: #003569
}
.images .line {
margin-bottom: 14vw;
margin-left: 2vw;
margin-right: 2vw;
display: flex
}
.images .line .img {
cursor: pointer;
position: relative;
text-align: center;
width: 47vw;
height: 47vw;
margin-right: 1vw
}
.images .line .img .img-wrap {
height: 100%;
overflow: hidden;
position: relative;
margin-bottom: 10px;
display: flex;
align-items: center;
background: #fff
}
.images .line .img .img-wrap:hover .desc {
transform: translateY(0)
}
.images .line .img img {
width: 100%;
position: absolute;
left: 0
}
.images .line .img .icon {
display: none
}
.images .line .img .download {
position: absolute;
bottom: -46px;
display: inline-block;
background: rgba(255, 255, 255, .7);
border-radius: 3px;
padding: 8px 10px;
color: #555;
left: 50%;
font-size: 14px;
transform: translateX(-50%);
box-shadow: .5px .5px 2px rgba(0, 0, 0, .1)
}
.images .line .img .video {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-image: url(./img/icon1.png);
background-size: cover;
z-index: 1000
}
.images .line .img .Carousel {
position: absolute;
top: 15px;
right: 20px;
width: 30px;
height: 30px;
background-image: url(./img/icon2.png);
#background-size: cover;
background-size: 65px 65px;
background-position: 0 0;
z-index: 1000
}
<div id="myDiv" class="images">
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/a" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_snow.jpg" alt=""></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/b" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""><div class="video"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/c" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_mountains.jpg" alt=""><div class="video"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
</div>
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/e" target="_blank">
<i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<div class="Carousel"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
</div>
</div>
解决方案
您可以将flexbox用于行，填充顶部技巧来制作正方形，并使用对象适合度来使图像适合正方形(例如，您需要使用polyfill如果您使用对象拟合-否则，如果您不想使用对象拟合，则可以用背景图像替换图像)
我已经离开了图标并下载了供您样式设置的链接
a {
text-decoration: none;
color: #003569
}
/* try not to over qualify selectors - it's inefficient and harder to maintain. if you have many line classes doing different things, then you need to use something more specific to this line - eg image-line */
.line {
margin: 2vw 0;
display: flex;
flex-direction: row;
justify-content: space-between;
/* spaces out images evenly with no space at the sides */
}
.img {
flex-basis: 32%; /* allow for 3 images per line with 2% space between each image */
max-width: 32%;
cursor: pointer;
}
.img-wrap {
display: block;
position: relative;
padding-top: 100%;
/* creates a square */
}
.img-wrap>img {
/* make img fill link */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* make image fill square and keep aspect ratio */
z-index: 1;
}
<div id="myDiv" class="images">
<!-- try indenting your code properly - helps with maintenance and just makes things easier to read and see where the nesting levels are -->
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/a" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/b" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
<div class="video"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/c" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
<div class="video"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
</div>
<div class="line">
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/e" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
</div>
</div>
有用链接:
I have created the following page for ios devices when I display the page on iPhone I get extra white space at the bottom of each row! I don't know how to remove the extra white space between each rows(there is 3 images in each row) and how to make all images be of same size(square size)I would appreciate if you guys help me.Thanks
a {
text-decoration: none;
color: #003569
}
.images .line {
margin-bottom: 14vw;
margin-left: 2vw;
margin-right: 2vw;
display: flex
}
.images .line .img {
cursor: pointer;
position: relative;
text-align: center;
width: 47vw;
height: 47vw;
margin-right: 1vw
}
.images .line .img .img-wrap {
height: 100%;
overflow: hidden;
position: relative;
margin-bottom: 10px;
display: flex;
align-items: center;
background: #fff
}
.images .line .img .img-wrap:hover .desc {
transform: translateY(0)
}
.images .line .img img {
width: 100%;
position: absolute;
left: 0
}
.images .line .img .icon {
display: none
}
.images .line .img .download {
position: absolute;
bottom: -46px;
display: inline-block;
background: rgba(255, 255, 255, .7);
border-radius: 3px;
padding: 8px 10px;
color: #555;
left: 50%;
font-size: 14px;
transform: translateX(-50%);
box-shadow: .5px .5px 2px rgba(0, 0, 0, .1)
}
.images .line .img .video {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-image: url(./img/icon1.png);
background-size: cover;
z-index: 1000
}
.images .line .img .Carousel {
position: absolute;
top: 15px;
right: 20px;
width: 30px;
height: 30px;
background-image: url(./img/icon2.png);
#background-size: cover;
background-size: 65px 65px;
background-position: 0 0;
z-index: 1000
}
<div id="myDiv" class="images">
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/a" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_snow.jpg" alt=""></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/b" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""><div class="video"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/c" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_mountains.jpg" alt=""><div class="video"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
</div>
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/e" target="_blank">
<i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<div class="Carousel"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
</div>
</div>
解决方案
You can use flexbox for the rows, padding top trick to make squares and object-fit to make your images fit the squares (you will need a polyfill for ie if you use object fit - otherwise you can replace the images with background images if you do not want to use object fit)
I have left the icons and download links for you to style
a {
text-decoration: none;
color: #003569
}
/* try not to over qualify selectors - it's inefficient and harder to maintain. if you have many line classes doing different things, then you need to use something more specific to this line - eg image-line */
.line {
margin: 2vw 0;
display: flex;
flex-direction: row;
justify-content: space-between;
/* spaces out images evenly with no space at the sides */
}
.img {
flex-basis: 32%; /* allow for 3 images per line with 2% space between each image */
max-width: 32%;
cursor: pointer;
}
.img-wrap {
display: block;
position: relative;
padding-top: 100%;
/* creates a square */
}
.img-wrap>img {
/* make img fill link */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* make image fill square and keep aspect ratio */
z-index: 1;
}
<div id="myDiv" class="images">
<!-- try indenting your code properly - helps with maintenance and just makes things easier to read and see where the nesting levels are -->
<div class="line">
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/a" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/b" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
<div class="video"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
<div class="img">
<a class="img-wrap" href="https://awebsite.com/n/c" target="_blank">
<i class="icon"></i>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
<div class="video"></div>
</a>
<a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
</div>
</div>
<div class="line">
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/e" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
download="">Download</a></div>
</div>
</div>
Useful Links:
这篇关于如何删除div行之间的多余空白并使所有div图像变为方形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
