locked
Overflow of Cropped Image Links Keep Original Dimensions RRS feed

  • Question

  • User-939035612 posted

    I used this technique https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/ to crop thumbnail images and it works great for the images, but the links holding the images keep their original dimensions. The result is a bunch of space with invisible links where there used to be images. If I have a div tag like so:

    <div class="thumbnail">
      <a href="post.aspx"><img src="portrait-img.jpg" class="portrait" alt="Image" /></a>
    </div>
    
    with this CSS:
    
    .thumbnail {
      ;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    .thumbnail img {
      ;
      left: 50%;
      top: 50%;
      height: 100%;
      width: auto;
      -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
    }
    .thumbnail img.portrait {
      width: 100%;
      height: auto;
    }

    And the original image height is 500px then I have an area on my page 500px high where clicking on it takes users to post.aspx. This happens even if I try to set the max-height or height of the a element itself to 200px. It doesn't recognize the height of the link and keeps it the same as the original image. As you can imaging this could be quite frustrating for users that click on blank space only to be taken to to a post. It is so bad that I am thinking of abandoning the cropping altogether.

    Monday, June 15, 2020 6:33 AM

All replies

  • User-719153870 posted

    Hi CopBlaster,

    The issue description seems can be easily understood, but the issue itself cannot be reproduced.

    Would you please share the code that can repro it?

    Thanks,

    Yang Shen

    Monday, June 15, 2020 8:54 AM
  • User-939035612 posted

    My CSS looks like this:

    .thumbnail {
        ;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-color: #fafafa;
    }
    .thumbnail:hover
    {
        background-color: #fff;
    }
        .thumbnail img {
            ;
            left: 50%;
            top: 50%;
            height: 100%;
            width: auto;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
            .thumbnail img.card-img-top {
                width: 100%;
                height: auto;
            }
    
    My html looks like this:
    
    <div class="thumbnail">
                            <a id="imagelink" runat="server" class="thumblink" href='mypost.aspx'><img id="image" runat="server" class="card-img-top lazyload" data-src='myimage.jpg' alt='my image' /></a>
                            </div>

    I am also using Bootstrap 4. The image is in a card withing card columns

    Monday, June 15, 2020 9:06 AM
  • User-939035612 posted

    This seems to be working

    .thumbnail {
        ;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-color: #fafafa;
    }
    .thumbnail:hover
    {
        background-color: #fff;
    }
        .thumbnail img {
            bottom: 0;
            height: 100%;
            left: 0;
            object-fit: cover;
            object-;
            ;
            right: 0;
            top: 0;
            width: 100%;
        }
    
    .thumblink {
    }

    Monday, June 15, 2020 9:29 AM