configuración de html div para restringir el ancho de div interno

Tengo la siguiente configuración

<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 !

preguntado el 01 de septiembre de 12 a las 15:09

No use <center> tags anymore, they're outdated! Instead, you can use some CSS rules, e.g. width: 50%; margin: 0 auto;. -

In this case, it is not possible to control what gets displayed in the innerDiv. It is rendering variable data coming from a Database store for instance. I only have control on the style on the innerDiv and not on what data is displayed within it. -

3 Respuestas

max-width property can help you.

Eliminar width atributo de img tag and write additional css code:

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

Respondido el 01 de Septiembre de 12 a las 15:09

Looks like this is something that helps my case. Thanks ! - user1055761

ComFreak has the complete answer.

Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.

  #innerDiv {
       max-width:800px;
       margin:0 auto;}

  img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
       width:100%;
       height:0 auto;}

This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.

Respondido el 01 de Septiembre de 12 a las 15:09

Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp

Respondido el 01 de Septiembre de 12 a las 17:09

I have updated the question with additional information. But thanks Nightgem and ComFreek ! (I wasn't aware of the 'center' tag and will also try and prevent that from being added to the div's html/etc). - user1055761

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.