1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Resize an Image in Div within another Responsive Div

Responsive Divs

         

timbo1

12:10 pm on Feb 16, 2018 (gmt 0)

5+ Year Member



For my header on a responsive website (using boilerplate within Dreamweaver), I have:

Full-width image, which resizes according to the screen size.
Header Text and Sub Header Text, which also resizes.
A logo image positioned relative to the main image, which I cannot get to resize.

My code is as follows:

HTML
<body ontouchstart="">
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="images/xxx.jpg" alt="xxx" longdesc="xxx">
<div id="LogoImage"><img class="Logo" src="images/yyy.jpg" alt="yyy."></div>
<div id="HeaderText">Header Text</div>
<div id="SubHeaderText">SubHeader Text</div>
</div>


Relevant CSS
#LayoutDiv1 {
position: relative;
clear: both;
float: left;
margin-top: 60px;
margin-left: 0px;
width: 100%;
display: block;
}
#HeaderText {
position: absolute;
top: 2%;
left: 5%;
color: #FFF;
font-family: Century Gothic, sans-serif;
text-shadow: 2px 2px 2px #333;
font-weight: bold;
font-size: 15px;
font-size: 7vw;
}
#SubHeaderText {
position: absolute;
bottom: 2%;
left: 5%;
color: #FFF;
font-family: Century Gothic, sans-serif;
text-shadow: 5px 5px 5px #333;
font-weight: bold;
font-size: 12px;
font-size: 4vw;
}
#LogoImage {
position: absolute;
top: 5%;
right: 5%;
}
.Logo {
padding:6px;
border:1px solid #021a40;
background-color:#FFF;
border-radius: 50%;
}


At the moment, the "LogoImage" does not resize to match the smaller screen sizes. I have tried
max-height: 50%;
, but this image resolutely refuses to become responsive!

ipco

2:17 pm on Feb 16, 2018 (gmt 0)

10+ Year Member



You need to close <div id="LayoutDiv1">

timbo1

2:25 pm on Feb 16, 2018 (gmt 0)

5+ Year Member



Ah, sorry. The LayoutDiv1 IS closed - That's the </div> at the end. It's the GridContainer that's not closed in the text shown, because there is more HTML in other parts of the site that I have not copied.

ipco

3:25 pm on Feb 16, 2018 (gmt 0)

10+ Year Member



That just looked obvious. Now I have my IDE fired up I'll try to have another look.

ipco

5:01 pm on Feb 16, 2018 (gmt 0)

10+ Year Member



Try this 
<body ontouchstart=""> 
 <div class="gridContainer clearfix"> 
 <div id="LayoutDiv1">
  <img src="images/images/xxx.jpg" alt="xxx" longdesc="xxx">
  <div id="LogoImage">
   <img class="Logo" src="images/yyy.jpg" alt="yyy.">
  </div> <!-- close LogoImage -->
  <div id="HeaderText">
   Header Text
  </div> <!-- close HeaderText -->
  <div id="SubHeaderText">
   SubHeader Text
  </div> <!-- close SubHeaderText -->
  </div> <!-- close LayoutDiv1 -->
 </div> <!-- close gridContainer -->


#LayoutDiv1 { 
position: relative; 
clear: both; 
float: left; 
margin-top: 60px; 
margin-left: 0px; 
width: 100%; 
display: block; 
} 
#HeaderText { 
position: absolute; 
top: 2%; 
left: 5%; 
color: #FFF; 
font-family: Century Gothic, sans-serif; 
text-shadow: 2px 2px 2px #333; 
font-weight: bold; 
font-size: 15px; 
font-size: 7vw; 
} 
#SubHeaderText { 
position: absolute; 
bottom: 2%; 
left: 5%; 
color: #FFF; 
font-family: Century Gothic, sans-serif; 
text-shadow: 5px 5px 5px #333; 
font-weight: bold; 
font-size: 12px; 
font-size: 4vw; 
} 
#LogoImage { 
position: absolute; 
top: 5%; 
right: 5%; 
} 
.Logo { 
padding:6px; 
border:1px solid #021a40; 
background-color:#FFF; 
border-radius: 50%; 
}

timbo1

7:06 pm on Feb 16, 2018 (gmt 0)

5+ Year Member



I may be being thick, but I can't see what's different?

ipco

9:21 pm on Feb 16, 2018 (gmt 0)

10+ Year Member



Sorry, pasted the wrong file 
.Logo { 
padding:6px; 
border:1px solid #021a40; 
background-color:#FFF; 
border-radius: 50%; 
display:inline-block; width:100%; float:right;
}
.logo img {width:auto; height: 100%; width: 100%;}

tangor

11:58 pm on Feb 16, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Might try these examples from wc3, these scale to the container or to the max-width.

img {
width: 100%;
height: auto;
}

or

img {
max-width: 100%;
height: auto;
}

timbo1

4:43 pm on Feb 18, 2018 (gmt 0)

5+ Year Member



Hi -


Sorry, sadly neither of those two suggestions have worked. :( Image still stays the same size.

not2easy

6:05 pm on Feb 18, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



If you are using this line: 
.logo img {width:auto; height: 100%; width: 100%;}
with this:
img {
max-width: 100%;
height: auto;
}
it can't work unless you remove 
.logo img {width:auto; height: 100%; width: 100%;}

There are conflicting instructions and the element ".logo img" has specific instructions that override the "img" element.

timbo1

12:50 pm on Feb 21, 2018 (gmt 0)

5+ Year Member



OK. None of this is working.

I have done a temporary fix by adding "height: 50px;" in the mobile layout section for .logo.

This proves to me that the image can be resized. It also suggests that if "max-height: 50%;" isn't working, then there must be something wrong with my <div> structure. It seems that the logo image is not acknowledging the constraint of the container div "#LayoutDiv1".

Any further thoughts would be appreciated.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026