网页图片布局

网页布局 -图片展示

0. item在网页内布局

.container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            gap: 20px;
        }

采用网格布局。网格属性设置为四个等宽的列，列之间，行之间间隔20PX

1.图片内悬浮少量信息，鼠标移入文字消失，专注观看

图片布局

 .image-container {
            position: relative;
            height: 200px;
            overflow: hidden; 
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

1. relative：图片采取相对定位，方便父元素指定位置，同时让子元素采取绝对定位显示在图片上
2. 200px：图片容器指定高度，杜绝层次不齐
3. 100%：图片宽高100%确保占满容器，避免留下不整齐的边角
4. cover：让图片进行缩放，确保不变型

图片中文字布局

    .image-date {
            width: 100%;
            position: absolute;
            top: 0;
            color: white;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            /* 半透明黑色背景 */
            transition: opacity 0.5s ease;
            font-size: 16px;
        }
        .image-container:hover .image-date {
            opacity: 0;
        }

1. absolute：绝对布局 top指定位于图片左上

2. top：默认在左上角 px增加下移动 可以在浏览器中实时调整查看效果

3. 10px：文字与本元素内间隔，不设置文字背景刚好笼罩文字

4. opacity 0.5s ease：设置不透明度的变化规则，ease慢慢变化0.5s完成，

5. .image-container:hover .image-date 鼠标悬浮图片容器就隐藏文字，常规的.image-dater:hover只在文字元素被悬浮时触发

2.图片下显示标题 提供更详细信息，点击进入详情页

图片下文字布局

   .image-title {
            color: rgb(24, 25, 28);
            font-size: 15px;
        }
        a {
            text-decoration: none;

        }

设置文字大小颜色，取消链接下划线

3.多个item布局 -flask 模板文件

多个item

{% import "new/_macro.html" as macro %}
    <div class="container">
        {% for post in posts %}
        <div class="item">
            {{ macro.thumbnail(post) }}
        </div>
        {% endfor %}

重复div.item

item 定义

<div class="image-container">
    <img src={{ url_for('api_bp.static',filename='{}.jpg' .format(post.id))}} alt="{{post.naem}}">
    <p class="image-date">{{post.ctime}}</p>
</div>
<div class="caption">
    <a href="/detail/{{post.id}}">
        <p class="image-title">{{post.name}}</p>

    </a>
</div>

1.两个div 图片 2.下方文字链接

1.图片后带文字

2.链接内放标题