Question

I have the following setup

<div id="outerDiv" style="width:100%;">
  <div id="innerDiv">
    <center> 
        <a href="http:/..." title="..">
            <img src="http://...jpg" width="800" height="xxx" alt=".."> 
        </a> 
    </center>
  </div>
<div>

The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.

Am looking for something like:

<div id="outerDiv" style="width:100%;">
  <div id="innerDiv" style="attribute:xxx;" or something similar>
    <center> 
        <a href="http:/..." title="..">
            <img src="http://...jpg" width="800" height="xxx" alt=".."> 
        </a> 
    </center>
  </div>
<div>

Please note that : the innerDiv is rendering ‘variable’ data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like ‘center’ or ‘width’ on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use ‘max-width’ on the outer-div, but that didn’t seem to work (I am not an expert on html/css – so I could have done it incorrectly).

Many thanks for all your help !

Answer 1

max-width property can help you.

Remove width attribute from img tag and write additional css code:

<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>