Wordpress 图片库的断点

Question

我正在设计一个新的网页设计，我坚持让我的图像在主题的某些部分响应，一直在搜索并尝试 style.css 和内联中的不同代码片段，但没有能够在我的 phone 和平板电脑上调整任何图像的大小。

相关页面： http://zephyrusrecords.be/zephyrus/records/ 这是我想在手机 phone 或平板电脑上缩小尺寸的专辑封面.... 希望这是清楚的，我提供了正确的信息，如果不是很抱歉，无论如何都要提前感谢，我已经坚持了一段时间所以如果有人能帮助我就太好了..

一切顺利，米歇尔

Answer 1

你需要改变这3个元素的css .table1, ul.img-list li和 img :

.table1 {
        align-self: center;
        width: 850px; /*   Remove this line or change to width: auto;*/
        table-layout: fixed; 
}

ul.img-list li {
    display: inline-block;
    height: 200px; /*  Remove this line or change to height: auto; */
    margin: 0 1em 1em 0;
    position: relative;
    width: 200px; /*  Remove this line or change to width: auto; */ 
}

img {
    height: auto;
    max-width: 100%; /*  Remove this line */
    width: 100%; /*  add this line */
}

我建议您为图片添加 class，或者您可以使用 ".table1 img"。

css 更改将在您缩小页面大小时自动适应每个图像框的大小。

更新：

对于悬停部分，您需要更改元素的css span.text-content :

span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: block;  /*  Change to block */
    height: 100%; /*  Change to 100% */
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%; /*  Change to 100% */
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

更新 2：

如果要让文字居中，需要再次更改元素span.text-content的css:

span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: flex;  /*  Change to flex */
    height: 100%;
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    align-items: center; /*  add this line */
    justify-content: center; /*  add this line */
}

Wordpress 图片库的断点

Breakpoint for Wordpress image gallery

wordpress

mobile

breakpoints

gallery

responsive