CODEWITHSUNDEEP
htmlcss
TiggerToo
TiggerToo

Reputation: 669

Resizing and rotating in CSS

The code:

<html>
<style>
  body {
  height: 4in;
  width: 6in;
  margin: 0;
  padding: 0.1in;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.outer {
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  background:url('some-image') center center no-repeat;
  background-size: contain;
}
</style>
<body>
<div class="outer">
  <div class="image rotate90"></div>
</div>
</body>
</html>

The intention here is to set image as the background to fill up as much as possible of the 4x6 area. If it's a picture that's wider than its height, everything works exactly like I'd like it to, but if it has a large height than its width, it changes the size before rotating it, which leaves the image much smaller than what I'm looking for. Is there any way to make this work?

Upvotes: 2

Views: 687

Answers (2)

Chaitanya
Chaitanya

Reputation: 729

Include some JavaScript:

var img = document.getElementById('imageid'); //or however you get a handle to the IMG     
var width = img.clientWidth;
var height = img.clientHeight;

If(width > height) {
    $('#imageId').addClass('rotate90');
}

This will help rotate only necessary images (whose width is greater) while others will be placed with original dimensions.

Upvotes: 2

user31415
user31415

Reputation: 466

try applying the rotate class before the image class

Upvotes: 0

Related Questions