Question

189

Proportionally resize width and height of div on window resize

rated 0 times [ 195] [ 6] / answers: 1 / hits: 8051 / 11 Years ago, sat, december 7, 2013, 12:00:00

Couple of days I am trying to make a div re-size like an image(proportionally).

For example If I have a div with dimensions 500x140, I want it on a browser re-size to react like an image that has width=100%.
I find out a similar questions but they didn't work for me.

Is there a way to do that(without using a dummy image)?

EDIT:
enter

p.s. Sorry for my bad English.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Ho can I add two values in Bootstrap range slider

Sun, Jan 24, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 11 Years ago brianaclaras · Accepted Answer

I found the answer myself.

HTM:

<div class=parent>

   <div class=child>

        something...

   </div>

</div>

CSS:

.parent {

    position: relative;

    width:1280px;

    max-width: 100%;

    margin: 0 auto;

    padding: 30px;

}

.parent:before {

    margin-top: 25%;

    content: '.';

    font-size: 0;

    display: inline-block;

}

.child {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: red;

    max-height: 100%;

}

The interesting part in the code is the margin-top of the .parent:before selector. By this you can adjust the basic height of the div.
Here is the jsfiddle - http://jsfiddle.net/ndzCL/

It is not the perfect solution but it is simple and use only CSS.

Thanks everyone for the help :)