CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Honest Objections
Honest Objections

Reputation: 873

Having an image fill a container after transform(90deg)

I would like to have an image rotate and fill the container after it's been loaded. The issue I'm having is the height is automatically set when loaded and then not resetting after rotation. Here is a JSFiddle of the issue:

$('.load').on("click", function () {
	var image = $('.image');
  
  image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
  
  image.addClass('rotate-image');
  
 });
.image {
  max-width: 100%;
  max-height: 100%; 
}

.rotate-image {
  transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
  <img class="image" src="" />
</div>

<br />
<button class="load">Load</button>

Upvotes: 2

Views: 2238

Answers (2)

dodov
dodov

Reputation: 5844

This requires the max-width and max-height styles to be removed, though.

To fit the image, it has to be made larger so that it width (height, when rotated) becomes as big as the container's height. However, it's rotated only visually and the browser doesn't care about that because transform doesn't change the flow of the website. For it, there is an "unrotated" picture whose height is now bigger than its container. Visually rotating the image doesn't change anything. For that purpose, the image needs to be pulled up with a number of pixels equal to how much its bigger than the parent. Those pixels are divided by two because the image overflows at the bottom only.

Play with the fiddle to see what I mean.

$('.load').on("click", function() {
  var image = $('.image');
  image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
  image.addClass('rotate-image');

  var parentHeight = image.parent().height();
  image.css("width", parentHeight + "px");
  image.css("position", "relative");
  image.css("bottom", ((image.height() - parentHeight) / 2) + "px");
});
.rotate-image {
  transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
  <img class="image" src="" />
</div>

<br />
<button class="load">Load</button>

Edit: Beware, if you load the image from an external source by setting its src and immediately rotate it, image.height() might return 0 and the image might be displaced. Then, if you click again, its height is now correct and it gets placed right.

I'm not absolutely sure, but I think that's because when you load the image, the browser needs to download it first, meaning that you don't yet know what its dimensions are.

To see that in action, paste some image URLs from Google in the fiddle I provided.

Upvotes: 2

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

You need to do this by javascript or jquery. Your goal is:

.Rotated_Img ...

width = 100 % of parent height

height = 100 % of parent width

And i do not think css has any think for this, until the parent width and height have related to view port vw and vh.

jquery:

$('.Rotated_Img').each(function(){
  $(this).css('width', $(this).parent().height() + 'px');
  $(this).css('height', $(this).parent().width() + 'px');
});

Upvotes: 0

Related Questions