Wordpress 图片库的断点

Question

我正在研究一个新的网页设计，我坚持让我的图像在主题的某些部分响应，一直在搜索并尝试不同的代码片段.css风格和内联，但无法在我的手机和平板电脑上调整任何图像大小。

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

万事如意， 米歇尔

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 */
}

我建议您为图像添加一个类，或者您可以使用".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 */
}