模板:Gallery/styles.css:修订间差异

来自决策链云智库
无编辑摘要
标签已被回退
无编辑摘要
标签已被回退
第2行: 第2行:
     margin-top: var(--space-md);
     margin-top: var(--space-md);
     display: flex;
     display: flex;
     overflow: auto; /* 启用滚动条 */
     overflow-x: auto; /* 仅在水平方向显示滚动条 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
     gap: var(--space-xs);
     gap: var(--space-xs);
     flex-wrap: nowrap; /* 禁止元素换行 */
     flex-wrap: nowrap;
    max-width: 100%; /* 或者设定一个具体的最大宽度 */
}
}


第15行: 第17行:
.template-gallery a.mw-file-description img {
.template-gallery a.mw-file-description img {
     transition: transform 250ms ease;
     transition: transform 250ms ease;
     max-width: 100%; /* 确保图片不超过其父元素的宽度 */
     max-width: 100%;
     height: auto; /* 保持图片的宽高比 */
    min-width: 150px; /* 设置最小宽度 */
     height: auto;
}
}



2024年1月25日 (四) 00:06的版本

.template-gallery {
    margin-top: var(--space-md);
    display: flex;
    overflow-x: auto; /* 仅在水平方向显示滚动条 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    gap: var(--space-xs);
    flex-wrap: nowrap;
    max-width: 100%; /* 或者设定一个具体的最大宽度 */
}

.template-gallery a.mw-file-description {
    display: block;
    border-radius: var(--border-radius--small);
    overflow: hidden;
}

.template-gallery a.mw-file-description img {
    transition: transform 250ms ease;
    max-width: 100%; 
    min-width: 150px; /* 设置最小宽度 */
    height: auto;
}

.template-gallery a.mw-file-description:hover img {
    transform: scale(1.1);
}

.template-gallery video {
    max-width: none !important;
    max-height: 120px !important;
    width: auto !important;
    overflow: hidden;
    border-radius: var(--border-radius--small);
}