Question

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

相关网页： http://zephyrusrecords.be/zephyrus/records/ 这张专辑涵盖了我希望在手机或平板电脑上减小的尺寸.... 希望这是明确的，我提供了正确的信息，如果不是抱歉，并提前感谢，已经坚持了一段时间，如果有人可以帮助我这个将是很好的..

一切顺利，米希尔

Answer 1

您需要更改这3个元素的 .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 */
}

我建议您为图片添加课程，或者您可以使用“。table1 img”。

当您缩小页面大小时，css更改将自动调整每个图像框的大小。

更新：

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

的css

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图像库的断点

1 个答案: