Asked  7 Months ago    Answers:  5   Viewed   174 times

I am working with images, and I ran across a problem with aspect ratios.

<img src="big_image.jpg" width="900" height="600" alt="" />

As you can see, height and width are already specified. I added CSS rule for images:

img {
  max-width:500px;
}

But for big_image.jpg, I receive width=500 and height=600. How I can set images to be re-sized, while keeping their aspect ratios.

 Answers

63

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).

Tuesday, June 1, 2021
 
Baba
answered 7 Months ago
17

You might try:

$img->resize(200, 150, 'outside')->crop('center', 'middle', 200, 150);

Some users post their versions of calculations... Here's also my version:

$sourceWidth = 1000;
$sourceHeight = 250;

$targetWidth = 200;
$targetHeight = 150;

$sourceRatio = $sourceWidth / $sourceHeight;
$targetRatio = $targetWidth / $targetHeight;

if ( $sourceRatio < $targetRatio ) {
    $scale = $sourceWidth / $targetWidth;
} else {
    $scale = $sourceHeight / $targetHeight;
}

$resizeWidth = (int)($sourceWidth / $scale);
$resizeHeight = (int)($sourceHeight / $scale);

$cropLeft = (int)(($resizeWidth - $targetWidth) / 2);
$cropTop = (int)(($resizeHeight - $targetHeight) / 2);

var_dump($resizeWidth, $resizeHeight, $cropLeft, $cropTop);
Wednesday, March 31, 2021
 
Naveen
answered 9 Months ago
82

You can try CSS3 object-fit, and see browser support tables.

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

JSFIDDLE DEMO

.container {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}
<div class="container">
  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>

Related Info:

  • Exploring object-fit ? Mozilla Hacks

  • Polyfill for CSS object-fit property

Sunday, June 13, 2021
 
sassy_geekette
answered 6 Months ago
47

You can wrapp your image in two containers. Give one container height:0 and a padding-top with the percentage you want for the height of your image in proportion to the width. So, for a height of 50% of the width use padding-top:50% and height:0, which - as explained here - will make the height proportional to the width by 50%.

.wrapper {padding-top:50%;height:0;position:relative;}

Inside of that container, you place another container with the following styling:

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

Now just place your image in the inner container and give it width:100% and height:100%

See fiddle: http://jsfiddle.net/henrikandersson/PREUD/1/ (updated the fiddle)

Wednesday, August 4, 2021
 
McAuley
answered 4 Months ago
15

Give 100% width of image

 .image.a{width:100%;}
Wednesday, August 25, 2021
 
Mashhadi
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share