0

Works fine (the image fills up the DIV and resizes based on browser size):

<div class="pageImgHdrMain">
    <div id="pageImgHdrSub">
        <div class="pageImgHolder" style="background: #fcf;">
            <img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto;" />
        </div>
    </div>
</div>

Doesn't work, the image is stretched out and cuts off as the browser resizes:

<div class="pageImgHdrMain">
    <div id="pageImgHdrSub">
        <div class="pageImgHolder" style="background: #fcf;">
            <div id="ctl00_BodyPlaceHolder_SpecialtyContentBlockImg">
                <div>
                    <div style="display:none;" align="left"></div>
                    <p><img src="art.jpg" alt="ArtThumbOne" title="ArtThumbOne" class=""><br></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.pageImgHdrMain
{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.pageImgHdrSub
{
    position: relative;
    width: 100%;
    margin: 0 auto; /*center-aligned*/
}
.pageImgHolder
{
    position: relative;
    margin: 0px;
    padding: 0px;
    float: left;
    top: 0px;
    left: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.pageImgHolder div div p img {
    width: 100%;
    height: auto;
}

I think what is messing it up is there are nested DIV inside the main DIV.

How can I resolve the issue.

2
  • In your css can't you just use .pageImgHolder img {width: 100%;} ?
    – Funk Doc
    Oct 24, 2014 at 18:17
  • @FunkDoc I doubt it because there are other nested DIV before I get get to img Oct 24, 2014 at 18:24

3 Answers 3

1

What are all the inner unnamed divs for?

I think what you need is to set the #ctl00_BodyPlaceHolder_SpecialtyContentBlockImg to position:absolute; min-width:100%; min-height:100%; max-width:100%; max-height:100%;

also you might want to consider renaming the ID :-)

The thing is, when you use an absolute positioned element inside another element (your relative positioned element) - you force the absolute to be exactly the same size. This might not work with an inner relative element.

The unnamed divs you have are static as default and behaves more or less like the relative positioned elements.

Hope it helps.

13
  • I knew someone would ask. It is auto generated by the CMS. Oct 24, 2014 at 18:23
  • Nope. It is still cutting off the image :/ Oct 24, 2014 at 18:25
  • Hmm, perhaps you have a link for the site? Also, if you use a CMS there might already be a style on your div. Try with !important in your own CSS to see if that is the case. The right approach would then be to eliminate the styling you dont want from the CMS-generated styling afterwards.
    – L.H
    Oct 24, 2014 at 18:28
  • Still being developed. Will post a Fiddle Oct 24, 2014 at 18:29
  • 1
    Okay buddy. You are always welcome to send a link to me with the new questions you could have, and I will try to assist you accordingly. Take care!
    – L.H
    Oct 24, 2014 at 20:18
1

Try adding following lines

min-width = '1000px'; // or any size you desire. It will set the minimum width
max-width = '1250px'; // or any size you desire. It will set the maximum width
min-height = '100%'; // or any size you desire

To the class "pageImgHolder div div p img"

.pageImgHolder div div p img {
        width: 100%;
        height: auto;
        min-width = '1000px'; // or any size you desire
        max-width = '1250px'; // or any size you desire
        min-height = '500px'; // or any size you desire
    }

Also add min and max properties in

<img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto;" />

like

<img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto; min-width:900px; max-width:1000px;" />
4
  • the main DIV always max-width is 1100 and max height is 337 Oct 24, 2014 at 18:51
  • You can set according to your need i just tried to give a reference. Oct 24, 2014 at 18:57
  • Here is a JSFiddle: jsfiddle.net/7Lr8nu87 (The image isn't resizing for some reason) Oct 24, 2014 at 18:58
  • if there is a problem with the code you can use !important keyword in css to force that property to it Oct 24, 2014 at 19:24
0

I had the same problem before and used first a table with width 100% and the div inside the table with the same, also without borders or paddings all set to 0 try it and tell me how it works. Tablets are old stuff but if you make them work together with divs then you will never more have troubles with divs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.