1

I'm building a website that uses images which must all be scaled down by a consistent factor (0.25). Like others have pointed out here and here, scaling is an operation that is done after the page elements are rendered, resulting in whitespace surrounding the scaled image. I need to get rid of that extra space.

I've read every solution and still can't figure this out. I'm totally fine with a javascript solution—which I still can't figure out—but I can't help but feel there is an alternative to using the scaling element and bypassing javascript altogether.

I could scale all of the original images down using imagemagick, but that's a last resort for a number of reasons.

<!DOCTYPE html>
<html>
<head>
<style>
    .image-container {
        background: #555; 
    }
    img {
        display: block;
        transform: scale(0.25);
    }
</style>
</head>
<body>

<p>Here's my first paragraph.</p>
<div class="image-container">
    <img src="https://live.staticflickr.com/65535/51806458206_1e7ba12389_o.png"><img>
    <img src="https://live.staticflickr.com/65535/51805498867_57abd12b23_o.png"><img>
</div>
<p>Here my second paragraph</p>
</body>
</html>

Here's a fiddle: https://jsfiddle.net/drfk7xz9/31/. Thank you in advance

Möbius Dickus
  • 129
  • 1
  • 4

1 Answers1

0

Figured it out (with javascript)

window.onload = function () {
  resizeImages();
};

function resizeImages() {
  var images = document.querySelectorAll("figure > img");
  var originalWidth = 0;
  for (var i = 0; i < images.length; i++) {
    originalWidth = images[i].naturalWidth;
    images[i].style.width = (originalWidth * 0.25) + "px";
  }
}
Möbius Dickus
  • 129
  • 1
  • 4