<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title>  
<style>
    
    .photo {
        margin: 5px;
        float: left;
        width: 200px;
        border: 1px solid gray;
    }

    img {
        width: 200px;
        height: auto; /*height:auto，是指根据块内内容自动调节高度。 height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。*/
    }

    .photo:hover {
        border: 1px solid black;
    }

    .text {
        text-align: center;
    }
    
</style>
</head>
<body>
    <div class="photo">
        <div class="imgs">
            <a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
        </div>
        <div class="text">这里添加图片文本描述</div>
    </div>

    <div class="photo">
        <div class="imgs">
            <a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
        </div>
        <div class="text">这里添加图片文本描述</div>
    </div>

    <div class="photo">
        <div class="imgs">
            <a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
        </div>
        <div class="text">这里添加图片文本描述</div>
    </div>

    <div class="photo">
        <div class="imgs">
            <a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
        </div>
        <div class="text">这里添加图片文本描述</div>
    </div>
</body>
</html>

更多推荐

CSS简单创建图片廊