CODEWITHSUNDEEP
css
raju
raju

Reputation: 6936

Parent container not overflowing if child scald using css3 Transform:Scale

I am working on a CSS3 transform.

parentDiv{
    overflow:scroll;
}
img{
    width:100%;
    height:auto;
}

I have an image inside a div. parentDiv scroll in y-direction as per image height. But when I transform img with css3 scale, img width increases , but parent div not scrolling in x-direction. Jsfiddle link:: https://jsfiddle.net/yf48ga22/

Upvotes: 0

Views: 433

Answers (1)

frnt
frnt

Reputation: 8795

See instead of scaling your image, scale div in which image is present to see scroll on both axis i.e x and y. I have made few changes html structure just for understanding check this jsFiddle.

$(document).ready(function(){
	$("#box > .ch").css({
  	'transform' : 'scale(1.8)',
    'transition' : '1s ease'
  });
});
#box{
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    background:red;
    flex-direction: column;
}
#box > .ch{
    flex:1;
    flex-shrink: 0;
    background: #fff;
    overflow: auto;
}
#box > .ch > img{
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div class="ch">
    <img src = "https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg">
  </div>
</div>

Upvotes: 1

Related Questions