CODEWITHSUNDEEP
htmlcss
Александр
Александр

Reputation: 131

How to make parent div auto height relatively browser width?

I want to make a div's height changeable relatively browser width, like if we create a div width:100%; and inside put img width:100%; height:auto;, so in this case height of div is changeable relatively height of img, that re-sizing from window width.

But in my case i don't want to put img inside parent div,(inside is also div width text block) i want to make behavior of parent div, like inside is img.

How to get it? It is possible ?

.hero-section-inner {
  width: 100%;
}
.hero-section-inner img,
.hero-section-inner-half img {
  width: 100%!important;
  height: auto!important;
}
.hero-section-inner-half {
  width: 50%;
  margin-top: 50px;
}
<div class="hero-section-inner">
  <img class="alignnone size-full wp-image-4769" src="http://www.ev-interiordesign.ru/wp-content/uploads/2015/10/about-header.jpg">
</div>
<div class="hero-section-inner-half">
  <img class="alignnone size-full wp-image-4769" src="http://www.ev-interiordesign.ru/wp-content/uploads/2015/10/about-header.jpg">
</div>

So it's example with img.

Upvotes: 0

Views: 68

Answers (3)

Emirhan
Emirhan

Reputation: 132

If you use float:left; to your div, It'll get image with and height automatically. Also, float:left; is important for responsive pages.

So,

.hero-section-inner {
    float: left;
    width: 100%;
}

Upvotes: 0

Bek
Bek

Reputation: 3205

padding (and margin) in percentage is always relative to width 

.container {
  width: 100%;
  padding-bottom: 54%; // relative to width
  background: red;
  height:0;
}

jsfiddle

you might be interested in looking at vh and vw css units

Upvotes: 2

James
James

Reputation: 1

Sure, you can make this. Just set the div like display:block, you can visit http://www.28uv.com/extreme-income-ninja/2-building-simple-funnel/ for more details and examples.

Upvotes: -1

Related Questions