Sizing image automatcailly on tablets and ipad-CodePudding

How can i automatically size my image for better performance on tablets and ipads

i need help with better css to size my image automatically when accessed on tablets and ipads

.photo {
 border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #8e9681;
    padding: 5px;
}

CodePudding user response：

Try using "%" instead of "px" as it adjusts accordingly to the screen resolution.

CodePudding user response：

put you images inside a img container like

  <div class="img-container">
      <img class="img" src="" />
   </div>

css

 .img-container{
         width:100px;
         height:100px;
         overflow: hidden;
    }

 .img{
       max-width:100%;
      }

By doing this you can achieve responsive img

CodePudding user response：

If you use Bootstrap read the Documentation!

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element!

For more Info see: https://getbootstrap.com/docs/4.0/content/images/

CodePudding user response：

If the answer is this simple

max-width: 100%

Otherwise please be more clear of what you want, with images and a working code.