CSS how to maintain image size without cropping

Question

I am trying to have image display without cropping.

These are the code sections I have tried manipulating without success. I also searched stackoverflow and W3 schools for variations but I'm not getting closer so believe my approach is flawed.

.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;
}

The goal is that the full image will show without cropping - however it continues to crop the top and bottom of image. See attached screenshot, and site is www.paddlebeforethewave.com

screenshot of image cropping

I am trying to learn. Appreciate any tips on why my approach is flawed.

thank you very much.

Updating with further information based on comments.

  <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>

I checked this page, the problem is in the image, not in CSS. The image is cut from the top and bottom. — Piotr Białek, Dec 04 '17 at 20:53

score 0 · Answer 1 · answered Dec 04 '17 at 21:13

The page at http://www.paddlebeforethewave.com is using:

<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">

and if you examine the srcset URLs you'll notice the images are cropped. For example, this image.

However, the default image (https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png) is not cropped.

So, one option would be to remove the srcset and go with:

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

Thanks @brett the image source isn't defined in the page code. I presume it's being manipulated in the code snipped I've added above. Any further thoughts? Much appreciated! — Ian McDonald, Dec 06 '17 at 01:45

CSS how to maintain image size without cropping

1 Answers1