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?