从Instagram小部件调整显示的图像大小

时间:2017-01-13 04:48:34

标签: php html css wordpress

我想将Instagram小部件on the footer of my website显示的图片的defaut大小更改为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;
}

我应该做出哪些正确的改变:enter image description here

对此: enter image description here

1 个答案:

答案 0 :(得分:0)

进行一些计算并在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;
}

为避免拉伸图像,请裁剪宽度和高度相同的图像。