我想更改 Instagram 小部件显示的图片的默认大小 on the footer of my website到 240x160px,这是我当前的 css 代码:
#footer {
float: left;
width: 100%;
background-image: url(../images/footer-bg.png);
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
padding: 50px 0 30px 0;
}
.instagram {
float: left;
width: 100%;
padding: 0 0 35px 0;
}
.instagram h2 {
color: #fff;
}
.instagram h2:before {
content: '';
display: none;
}
.instagram ul {
padding: 0;
margin: 0;
list-style: none;
float: left;
}
.instagram ul li {
float: left;
padding: 0;
width: 197px;
background: #fff;
}
.instagram ul li img {
display: block;
width: 100%;
}
.instagram ul li:hover img {
opacity: 0.7;
}
.instagram ul li
{
width:205px !important;
}
.tagcloud {
margin-bottom: 40px;
}
最佳答案
做一些计算并在 %
中设置 width
。
.instagram {
float: left;
width: 100%;
padding: 0 0 35px 0;
}
.instagram ul li {
float: left;
padding: 0;
width: 12.5%;
height: auto;
background: #fff;
}
.widget.instagram img,
.instagram ul li img{
width: 100%;
height: 160px;
}
为避免拉伸(stretch)图像,裁剪具有相同宽度和高度的图像。
关于php - 从 instagram 小部件调整显示图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41627546/