gpt4 book ai didi

HTML 图片库

转载 作者:行者123 更新时间:2023-11-28 16:11:13 25 4
gpt4 key购买 nike

enter image description here

我正在尝试制作一个图片库,我在使用以下代码时遇到的问题是图像不会向左浮动,因为图像大小不同。同样,当我单击图像以查看全尺寸时,它非常 pig 。有没有办法解决这个问题,或者在厨房模式下显示一半的图片。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css'>
</head>
<body>
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<div class='gallery-item'>
<a href="<?php echo $image['full'] ?>"><img src="<?php echo $image['full'] ?>" ></a>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
There are no images
<?php endif; ?>
</div>
</body>
</html>


.cf:before,
.cf:after{
content: " ";
display: table;
}

.cf:after{
clear:both;
}

.container{
max-width: 940px;
padding: 10px;
background: #f0f0f0;
margin: 0 auto;
}

.gallery{
width:100%;
}

.gallery-item{
float:left;
background: #fff;
width:19%;
margin:1%;
padding:2%;
padding-bottom: 5%;
box-shadow:1px 1px 3px rgba(0,0,0,.2);
}

.gallery-item img{
width:100%;
}

最佳答案

而不是使用 <img>在缩略图库中有不同的尺寸,使用具有固定尺寸的 div,因此它们将完美地 float ,而不是将图像设置为背景图像并添加 background-size: cover;因此图像将覆盖 div,溢出将被隐藏。

关于HTML 图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23344541/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com