Categories
Mastering Development

Force image aspect ratio also on mobile with CSS (object fit:cover not working)

Background:

I have a circle thumbnail img (.x-card-img) that crops also rectangular images on desktop.

Problem:

However, on lower screen resolutions the thumbnail (right image below) shape morphs into an egg. The problem seems to be that the underlying picture is not square, but that’s exactly the problem I want to resolve, so that regardless of what the user uploads, it’s always neatly integrated.

Attempts:

The widespread solution is to have object-fit: cover and either set height: auto or play around otherwise with width / height and max-width / max-height. I feel like I have tried everything, but nothing seems to work.

  1. UPDATE 1 As per answer below I added the following to replace the border radius:

    clip-path: circle(50% at 50% 50%);

    However, this still results in the image being too long and cut off
    the sides. Perhaps a better solution would be to have an attribute
    that zooms the image to fill enough to have a circle?

    enter image description here

  2. UPDATE 2

    The second solution below works on mobile but creates whitespace on desktop:

enter image description here


Desktop

enter image description here

Mobile

enter image description here

Original image 1

enter image description here

Original Image 2

enter image description here

.x-card-box {
    border: 0;
    border-radius: 9px;
    background-color: white;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 15px;
    border: 2px solid white;
    padding: 1.5625rem !important;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
    transition-property: initial;
    max-width: 275px !important;
}    
.x-card-name {
    font-size: 20px;
    color: #646464;
    padding-top: 30px;

}

.x-card-img {
    border-radius: 50%;
    border: 1px solid #b1b1b1;
    width: 100%;
    height: auto;
    max-width: 125px !important;
    max-height: 125px !important;
    margin-top: 15px;
    object-fit: cover;
}
<div class="container x-card-box">
  <div class="row">

    <div class="x-card-featured col-12 d-flex justify-content-center">
  
</div>
  <div class="x-card-name col-12 d-flex justify-content-center">
     
<span class="job_listing-title">Betti</span>
                            
  </div>

  <div class="x-card-photo col-12 d-flex justify-content-center">
        
                    
<img class="x-card-img" src="https://i.stack.imgur.com/aEW8l.png" alt="Betti">
                    
            
                
            </div>
  <div class="x-card-rating col-12 d-flex justify-content-center">
        
            
<div class="listing-stars">
                        
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>      
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>
                        
                    
                </div>
            
   </div>
  <div class="x-card-more col-12 d-flex justify-content-center">
    <button class="x-card-btn">&nbsp;</button></div>
  </div>
</div>


<!-- ************* NEXT CARD **************** -->


<div class="container x-card-box">
  <div class="row">

    <div class="x-card-featured col-12 d-flex justify-content-center">
  
</div>

<div class="x-card-name col-12 d-flex justify-content-center">
     
<span class="job_listing-title">Betti</span>
                            
  </div>

  <div class="x-card-photo col-12 d-flex justify-content-center">
        
                    
<img class="x-card-img" src="https://i.stack.imgur.com/Y667l.jpg" alt="Betti">
                    
            
                
            </div>
  <div class="x-card-rating col-12 d-flex justify-content-center">
        
            
<div class="listing-stars">
                    
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>      
<span class="listing-star listing-star--empty"></span>
<span class="listing-star listing-star--empty"></span>
                    
                </div>
            
   </div>
  <div class="x-card-more col-12 d-flex justify-content-center">
    <button class="x-card-btn">&nbsp;</button></div>
  </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *