css - 如何在移动 View 中删除填充并放大图像

在my blog上，我正在尝试减少蓝色框内的填充并放大图像，并移除移动视图的悬停。到目前为止，我的代码不会更改它。我只是想使其对触摸设备的响应速度更快

@media only screen and (max-width:800px) {
    #header, #pageWrapper, #footer {
        padding: 30px 20px;
        margin-bottom: 0px !important;
    }
    h1.logo {
        text-align: center;
        padding-bottom: 10px
    }
    .slide img {
        opacity: 1
    }
    .sqs-active-slide img {
        opacity:1
    }
    .collection-type-gallery #slideshowWrapper .slide img {
        background-color: white !important;
        margin: 2px 0;
    }
    img {
        max-width: 200px;
    }
    .hentry {
        background: #F8F9FC;
        padding: 10px;
        border-style: solid;
        border-color: #E2E7F5;
        border-width: 2px
    }
    .collection-51ca14b1e4b014f2c6e0c3e7 .slide img {
        opacity:1.0;
    }
}

最佳答案

对于图像，您需要使用!important声明来覆盖HTML中的常规特异性样式。
例如，如果要将新宽度设置为400px：

.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    width: 400px !important;
    height: auto !important;
}

关于css - 如何在移动 View 中删除填充并放大图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18342697/