网页设计图片排版代码

网页设计中，图片排版通常涉及到CSS（层叠样式表）的使用。CSS允许你精确控制元素的位置、大小、对齐方式等属性，包括图片。以下是一些常见的图片排版代码示例：

1. **基本图片展示**:

img {
    display: block; /* 默认居中 */
    max-width: 100%; /* 自适应宽度 */
    height: auto; /* 高度自适应 */
}

2. **响应式布局**:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
}

img {
    object-fit: cover; /* 图片按比例填充容器 */
}

3. **浮动排列** (适用于行布局) :

.float-left {
    float: left;
    margin-right: 1.5em;
}

.float-right {
    float: right;
    margin-left: 1.5em;
}

4. **网格布局** (如Bootstrap):

.grid-item {
    grid-column: span 2; // 占两个列
    align-self: center;
    justify-content: center;
}

5. **Flexbox布局**:

.flex-container {
    display: flex;
    justify-content: space-between;
}

.flex-item img {
    width: 100%;
    height: auto;
}