How to Fix Image Height Problem and Photo Strech Error in Blogger Template. Solved!  fix,image,same height images,image width and height,fix image quality,fix low contrast image,to fix underexposed image,how to fix low contrast image,fix image stretch wordpress,fix image quality on transform,height,fix image quality on transform css,hot to fix low contrast color image,fix image quality on transform css3,hero image,fixing images,image issues,images,rgb image,bgr image,shoulder height,color image,how to use the image widget,how to fix headlight level,image widget blogger,fix blogger image,how to customize blogger image,stretch images in blogger,image issue fix in blogger,fix blogger images issue in 2020,fix blurry images on blogger,blogger image issue,how to fix blogger image issue,images are not showing in blogger,how to fix blurry image in blogger,how to fix blogger images issues,fix blogger images uploading issue,how to fix blurry images in blogger,how to fix blurry images on blogger,blogger image,blogger image blurry,blogger tutorial

In this article, I will share a simple CSS code that has quite recently become a great Recommendation. The CSS Containment Specification characterizes a solitary property, contain, and it can assist you with disclosing to the program what parts of your design are free and won't require recalculating if some other piece of the format changes.

[ads id="ads1"]

While this property exists for adjustment enhancement reasons, it can likewise influence the format of your page. Accordingly, in this article, I'll clarify the various sorts of control you can profit by, yet in addition the things you need to keep an eye out for if applying to contain the components in your site.

Why blogger images height and width is stretched?

Browser extensions have frequently encouraged to add measurements to your pictures for best adjustment to allow the page to be spread out with the suitable space for the picture, before the actual picture. This stays away from a design move as the Chrome has as of late began estimating in the new Cumulative Layout Shift metric. 

Indeed, not all notable external web adjustment works properly. This really didn't have an effect in a ton of cases, as we'll see underneath. Adding custom width and height to your <img> markup have gotten valuable again after some new changes in the CSS world, and the snappy selection of these progressions by the most internet browsers.

How to solve blogger images height and width problem

Before I was dealing with an issue of height and width of pictures in a template, which was not shown properly in height and width on blogger. Since blogger not give us any approach to resizing pictures. I was unable to fix my picture, at that point I attempted to fix it from CSS code lastly. I got it, and fix it by the adding custom CSS code.

How to apply solution

  1. Go do blogger dashborad
  2. Click on Theme
  3. Click on CUSTOMIZE button
    How to Fix Image height and Width in Blogger template. Solved!
  4. Click on Advanced
  5. Select Add CSS Section
  6. Paste the below code in the CSS Box
    How to Fix Image height and Width in Blogger template. Solved!

Copy below code and paste it in CSS of your Blogger.

.post-body img {height: auto !important;}
.widget iframe, .widget img {max-width: 100%;}
img {border: none;position: relative;}  code-box

This CSS will fix all sorts of height/width problems from your blogger site. It will fix picture stature and width without resizing it physically or transferring it once more. What I am sharing it's exceptionally simple to use.

[ads id="ads2"]

Always make a backup of your template before making any changes to it. alert-info

Greetings! Cool if you would share this article on socials media, it will be filled my heart with joy. If you need any assistance related to this theme, feel free to ask in the comment section.


Show Comments