Question

我试图在没有裁剪的情况下显示图像。

这些是我试过操作但没有成功的代码部分。我也搜索了stackoverflow和W3学校的变化，但我没有越来越近，所以相信我的方法是有缺陷的。

.FeaturedPost .snippet-thumbnail {
   float: $(startSide);
   margin: 0;
   margin-$endSide: 1em;
}

.FeaturedPost .snippet-thumbnail img {
 width: 200px;
 height: auto;
 max-width: 100%;
 float: left;
 margin: 10px;
}

目标是在不裁剪的情况下显示完整图像 - 但是它会继续裁剪图像的顶部和底部。请参见随附的屏幕截图，网站是www.paddlebeforethewave.com

screenshot of image cropping

我正在努力学习。欣赏有关我的方法存在缺陷的原因的任何提示。

非常感谢你。

根据评论更新更多信息。

  <b:includable id='snippetedPostThumbnail'>
    <div class='snippet-thumbnail'>
      <b:with value='data:post.featuredImage.isYoutube ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, &quot;945:600&quot;): &quot;&quot;' var='highRes'>
          <b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684],imageRatio: &quot;945:600&quot;,sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,enhancedSourceset: data:highRes}' name='responsiveImage'/>
      </b:with>
    </div>
  </b:includable>

Answer 1

http://www.paddlebeforethewave.com的页面正在使用：

<img alt="Image" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" src="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png" srcset="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w256-h162-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 256w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w512-h325-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 512w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w945-h600-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 945w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w1684-h1069-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 1684w">

如果您检查srcset网址，您会注意到图片被裁剪。例如，this image。

但是，默认图像（https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png）未被裁剪。

因此，一个选项是删除srcset并使用：

<img alt="Image" src="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png" />

CSS如何在不裁剪的情况下保持图像大小

1 个答案: