Question

enter image description here

我正在尝试创建一个图片库，我遇到的问题是以下代码图像不会浮动到左侧，因为图像的大小不同。当我点击图像看到它的全尺寸猪。有没有办法解决这个问题，或者在厨房模式下显示一半的图片。

<!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%;
}

Answer 1

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

Answer 2

以下是使用Simon Arnold建议的代码：

<div class='container'>
    <?php if($images):?>
    <div class='gallery cf'>
        <?php foreach($images as $image):?> 
        <a href="<?php echo $image['full'] ?>">
            <div class='gallery-item' style="background:url(<?php echo $image['full'] ?>);"> 

            </div><!-- .gallery-item -->
        </a>

        <?php endforeach; ?>
    </div>
    <!-- .gallery cf-->
    <?php else: ?>There are no images
    <?php endif; ?>
</div>
<!-- .container -->

CSS

.gallery-item {
    width:number;
    height:number;
    background-size:cover;
}

Answer 3

我只是建立了一个社交媒体网站，以及（2）我在用户上传图片时所做的事情

将图像调整为多种尺寸，以便正确使用/查看（尝试并保持一致的高度或宽度）将Photoshop图像设置为特定高度，这样就保持一致。
使用CSS保持图像宽度不超出区域扩展的高度。

CSS更改：

.gallery-item img {

width:100%;

height:**MAKE THIS YOUR CONSTANT HEIGHT**;

}

如果图像的比例很大，它会拉伸图像，但你会得到你的答案，或者把它作为背景放在div中，如下所示。

CSS更改：

#Pic{ height: **MAKE THIS YOUR CONSTANT HEIGHT**; } <div id='Pic' style='background:url(picture.jpg)'></div>

这是一个预览（虽然图像会拉伸你的布局和画廊将保持井井有条和干净。 STAYS ORGANIZED

Consistent image width

Html图库

3 个答案: