CODEWITHSUNDEEP
csswidth
Andy Dickinson
Andy Dickinson

Reputation: 95

Setting a 1:1 square image to be 10% of the screen height and width css

Set the max height to be 10% of the page height. With a max width to be 10% of the pages width

For example if

Page height is 100px

Page width is 200px

Or

Page height is 200px

Page width is 100px

I would like my image to be set to 10px wide and 10px height

10% of whichever is smaller; the height or width of the page.

I've tried

width: 10%;
height: 0;
padding-bottom: 10%;

and

max-width: 10%;
max-height: 10%;

but they only effected by the width of the page, not the height.

Upvotes: 1

Views: 338

Answers (1)

Andy Dickinson
Andy Dickinson

Reputation: 95

figured it out

width: 10vmin; 
height: 10vmin;

CSS does 10% of the the smaller of the two, height or width

http://caniuse.com/#feat=viewport-units

Upvotes: 1

Related Questions