How to rotate an img 90º occupying 100% of the element?

Question

How to rotate an img 90º occupying 100% of the element?

Navigation

#1 by (2 votes)

2

I have the following image for example:

Thelineinblackisthecontainerofthepage(mobile)andinredtheimage,Inexample1iswhatIhavetoday,and2theresultI'mtryingtoreach,Icannotfindasolutionwithoutdistortingtheimage,doesitworkanyway?

followcode:

img {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.container {
  background-color: #bbb;
  width: 300px;
  height: 400px;
}

<div class="container">
  <img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/credit/hub/prepaid-image.png?01AD=3tN7YRjc7dW4pgCz6srp1Zwrd3T603duDiW7xKKoinH54ISdhxQdalQ&01RI=BDC70922D249C25&01NA="/>
</div>

css

asked by anonymous 06.09.2018 / 13:46

1 answer

How to set navbar with dropdown? When and where to use the terms: time complexity, space complexity?

score 2 · Accepted Answer

Option 1

You can use object-fit: contain in the image.
(this option does not work in IE as you can see here: link )

Here's how:

img {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotate(90deg) scale(1.35);
  object-fit: contain;
}

.container {
  background-color: #bbb;
  width: 300px;
  height: 400px;
}

<div class="container">
  <img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/credit/hub/prepaid-image.png?01AD=3tN7YRjc7dW4pgCz6srp1Zwrd3T603duDiW7xKKoinH54ISdhxQdalQ&01RI=BDC70922D249C25&01NA="/></div>

Option2usingtheimageasbackground.

ThisoptionworksinIE,buttheimagehastobeBackgroundofthecontainer,youcanconsultthebrowsersupporthere: link

.container {
  background-color: #bbb;
  width: 300px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.container::after {
    content: "";
    top: 15px;
    left: -55px;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
    display: inline-block;
    width: 410px;
    height: 300px;
    transform: rotate(90deg);
    background-image: url(https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/credit/hub/prepaid-image.png?01AD=3tN7YRjc7dW4pgCz6srp1Zwrd3T603duDiW7xKKoinH54ISdhxQdalQ&01RI=BDC70922D249C25&01NA=);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

<div class="container">
</div>