Menu icon Foundation
Images resize differently

I have a row that contains three columns with an image each. When the browser encounters a new break point it resizes the images (width: 100%; ...) accordingly. However the images started out with the same dimension but get resized differently.

How and why are they resized if the entire row is just resized? Could you help me understand why the center image on a small device is displayed 20px larger then the two flanking it?

Thank you very much.

Note: all images have the same height, but the center image is twice as wide as a single flanking column image

<div class="row" id="nail_art_contest-top" style="background: white url(images/section-up-b2w.png) top center no-repeat; padding-top: 235px;">
            <div class="small-3 columns">
                <a href="http://google.com" target="_blank">
                    <img src="images/nail_art_contest-2a.png" alt="nail_art_contest-2a" width="100%" height="auto">
                </a>
            </div>
            <div class="small-6 columns">
                <img src="images/nail_art_contest-2b.png" alt="nail_art_contest-2b" width="100%" height="auto">
            </div>
            <div class="small-3 columns">
                <img src="images/nail_art_contest-2c.jpg" alt="nail_art_contest-2c" width="100%" height="auto">
            </div>
        </div>
            

         

imagesscaling

I have a row that contains three columns with an image each. When the browser encounters a new break point it resizes the images (width: 100%; ...) accordingly. However the images started out with the same dimension but get resized differently.

How and why are they resized if the entire row is just resized? Could you help me understand why the center image on a small device is displayed 20px larger then the two flanking it?

Thank you very much.

Note: all images have the same height, but the center image is twice as wide as a single flanking column image

<div class="row" id="nail_art_contest-top" style="background: white url(images/section-up-b2w.png) top center no-repeat; padding-top: 235px;">
            <div class="small-3 columns">
                <a href="http://google.com" target="_blank">
                    <img src="images/nail_art_contest-2a.png" alt="nail_art_contest-2a" width="100%" height="auto">
                </a>
            </div>
            <div class="small-6 columns">
                <img src="images/nail_art_contest-2b.png" alt="nail_art_contest-2b" width="100%" height="auto">
            </div>
            <div class="small-3 columns">
                <img src="images/nail_art_contest-2c.jpg" alt="nail_art_contest-2c" width="100%" height="auto">
            </div>
        </div>
            

         
Karl Ward over 5 years ago

There is something wrong with your columns logic, although it would have been easier to see a link. I can't even see any breakpoints in there, because you have basically set 3 columns even at small screen size, that do not break.

Andrew Patterson over 5 years ago

I believe you'll find that your problem is a result of column padding. Columns include padding and that is fixed width. Therefore, when decreasing the width of the browser, narrower images get squeezed a greater percentage than wider ones. Since the height is proportional, it also decreases more.

One solution I've used in this situation is to make the padding itself proportional on columns:

.column, .columns {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.row .row {
  margin-left: -2.5%;
  margin-right: -2.5%;
}

For completeness you also need to make the left and right margins of inner rows proportional.

When you do this your images that use a different number of cells will scale proportionally because the padding now scales along with the image.

Hope this helps,

Andrew P.

Chestertonpdf over 5 years ago

Yes, as far as i am concerned, I think you may pay more attention to the column padding because of its fixed width. So, when you apply your image resizing application (http://www.rasteredge.com/how-to/vb-net-imaging/resize-image/), the size may not be changed, you have to finish this manually. Or if you don't want to change the image original size, but just narrow down the image, you can choose scale the image to required size (http://www.rasteredge.com/how-to/vb-net-imaging/scale-image/).

Mary Elbert about 1 year ago

I profoundly recommend you pick a customer library which is as 'near the metal' as you can get. Both ES and Solr have *really* basic hunt and refreshing pursuit  Text API On the off chance that a customer library presents an extra DSL layer trying to 'rearrange', I propose you take some real time to contemplate utilizing it, as it's probably going to confuse matters over the long haul and make investigating and requesting help on SO more hazardous.

gefocuxal about 1 year ago

 

Simplest way - This will keep the image size as it is and fill the other area with space, this way all the aptoidelite images will take same specified space regardless of the image size without stretching

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

Kiara Willson about 1 year ago

Thanks a lot guys for helping me out I was having this problem with my website https://www.pennysaviour.com/ and thank god I found this discussion and showed to my developer and AHH!! The problem got resolved! :)

Thanks Once Again

clickerheroes1 about 1 year ago

Use paint. fireboy and watergirl online.

Karo linne 11 months ago

Thanks everyone for this helpfull replies. I have the same problem to edit and resize my youtube video in my own website, but its ok now. Thanks!