在移动设备中居中时裁剪图像

 收藏

I am using Squarespace CMS customize css trying to align an image. When pushing the image with margin-left the image becomes cropped. I don't see anywhere in the code for it to be doing this. Not sure if it's something in the template that does this. I've tried messing with the position and adjusting the margins. Anything over 50px on the margin-left starts to crop out the photo.

enter image description here

enter image description here

我正在使用媒体查询图片

@media screen and (max-width:640px) {

  .summary-thumbnail-image{
    position:relative!important;
    margin-left:50px;
    width:150px!important;
    height:150px!important;
  } // Picture only

这是定制css的完整列表:

.summary-title-link{
      font-size: 34px;
    line-height: 1.5em;
  color:#cf8f2a;
  font-family:'acumin-pro-condensed';
  font-weight:700;
}

.summary-read-more-link{
 color:#cf8f2a;
  text-decoration:underline;
  line-height:1.2em;
}

.summary-read-more-link a{
    cursor:none;
}

.summary-metadata-item, .summary-metadata-item--cats, .summary-metadata-item, .summary-metadata-item--date{
  color: #9ea168;
}


@media screen and (max-width:640px) {

  .summary-thumbnail-image{
    position:relative!important;
    margin-left:50px;
    width:150px!important;
    height:150px!important;
  } // Picture only

  .summary-item-list{
    width:480px!important;
    margin:0 auto; 
  } // Whole Summary section

  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item{
    width:480px!important;
  } // Each blog post row

.sqs-gallery-meta-container{
  clear:both;
  width:100%!important;
 margin-top:-90px;
  } //Only the text


}
回复
  • 如果该图像显示为“背景图像”,则:

    @media screen and (max-width:640px) {
        .summary-thumbnail-image{
            background-size: cover;
            background-position: center center;
        }
    }