How To Rotate Outer Div Not Inner Content

How to fit an image inside a div and this div is rotated at 45deg?

Solution 1:

Add scale value in transform style for img like this:

.profile-photo { width: 210px; height: 210px; position: relative; left: 43px; top: 50px; border: 8px solid #000; border-radius: 60px; transform: rotate(45deg); overflow: hidden; z-index: 2; background: #34983e;padding:0 }

.profile-photoimg {
  width: 100%;
  transform: rotate(-45deg) scale(1.21)
}

<divclass="profile-photo"><imgalt="Profile photo"src="http://www.michiganurology.com/wp-content/uploads/2015/10/reddy.jpg"onerror="this.onerror=null;this.src='https://via.placeholder.com/500/E5E8EC/4B89DA?text=error+image';"></div>

Solution 2:

use below code.

HTML

<div class="div">
    <imgsrc="index.png"></div>

CSS

.div
    {
        width: 500px;
        background: lightblue;
        transform: rotate(40deg);
    }

W3schools transforms