编辑权限请联系管理员获取(ztm0929@icloud.com

MediaWiki:Common.css:修订间差异

来自天明的百科全书
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
标签手工回退
 
(未显示同一用户的3个中间版本)
第1行: 第1行:
/* 这里放置的CSS将应用于所有皮肤 */
/* 这里放置的CSS将应用于所有皮肤 */
.image-container {
/*.image-container {*/
    display: flex;
/*    display: flex;*/
    flex-wrap: wrap;
/*    flex-wrap: wrap;*/
    gap: 10px; /* 图片之间的间距 */
  /* gap: 10px; /* 图片之间的间距  
     justify-content: space-around; /* 图片均匀分布 */
     justify-content: space-around; /* 图片均匀分布 */
}
/*}*/


.image-container img {
/*.image-container img {*/
    flex: 1 1 calc(25% - 20px); /* 每张图片占25%的宽度,减去间距 */
  /* width: 200px; /* 强制规定图片宽度 */
    max-width: 100%;
  /*  height: auto; /* 保持纵横比 */
    height: auto;
  /*  object-fit: contain; /* 保持图片的纵横比 */
    object-fit: contain; /* 保持图片的纵横比 */
  /*  box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
    box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
/*}*/
}
 
/* 当屏幕宽度小于1200px时,调整图片宽度 */
/*@media (max-width: 1200px) {*/
/*    .image-container img {*/
/*        width: 150px;*/
/*    }*/
/*}*/
 
/* 当屏幕宽度小于768px时,调整图片宽度 */
/*@media (max-width: 768px) {*/
/*    .image-container img {*/
/*        width: 100px;*/
/*    }*/
/*}*/

2024年11月24日 (日) 22:45的最新版本

/* 这里放置的CSS将应用于所有皮肤 */
/*.image-container {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
   /* gap: 10px; /* 图片之间的间距 
    justify-content: space-around; /* 图片均匀分布 */
/*}*/

/*.image-container img {*/
   /* width: 200px; /* 强制规定图片宽度 */
  /*  height: auto; /* 保持纵横比 */
  /*  object-fit: contain; /* 保持图片的纵横比 */
  /*  box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
/*}*/

/* 当屏幕宽度小于1200px时,调整图片宽度 */
/*@media (max-width: 1200px) {*/
/*    .image-container img {*/
/*        width: 150px;*/
/*    }*/
/*}*/

/* 当屏幕宽度小于768px时,调整图片宽度 */
/*@media (max-width: 768px) {*/
/*    .image-container img {*/
/*        width: 100px;*/
/*    }*/
/*}*/