<!DOCTYPE html>
<html>
<head>
	<title>循环展示图片</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 20px;
		}
<pre><code>	.container img {
		width: 200px;
		height: 200px;
		object-fit: cover;
		margin: 10px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="container">
		<img src="img1.jpg">
		<img src="img2.jpg">
		<img src="img3.jpg">
		<img src="img4.jpg">
		<img src="img5.jpg">
		<img src="img6.jpg">
		<img src="img7.jpg">
		<img src="img8.jpg">
		<img src="img9.jpg">
		<img src="img10.jpg">
	</div>
</body>
</html>
<p>这是一个简单的展示图片的HTML代码,使用了flex布局。将图片放入一个容器中,通过设置容器的样式,使图片水平居中并自动换行。每张图片的大小可以根据实际情况进行调整。</p>
HTML5 图片轮播代码:轻松实现图片循环展示

原文地址: https://www.cveoy.top/t/topic/mvt6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录