Question

我有以下设置

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

outerDiv的宽度可以根据浏览器视口改变。有没有办法通过使用样式属性来限制innerDiv的宽度，以便它覆盖包含的图像宽度（在此示例中为800）。目前图像跨越视口，我希望div /浏览器将图像缩小到内部div大小。

我正在寻找类似的东西：

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

请注意：innerDiv正在渲染来自存储参数的“变量”数据。我只能控制innerDiv上的样式，以确保innerHtml上的'center'或'width'之类的内容不会超出outerDiv的设置范围。我曾试图在外部div上使用'max-width'，但这似乎不起作用（我不是html / css的专家 - 所以我本可以做错了）。

非常感谢你的帮助！

Answer 1

max-width财产可以帮助您。

从width标记中删除img属性并编写其他css代码：

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

Answer 2

ComFreak有完整的答案。

删除中心标记，然后添加一些css。如果您只想将该图像专门定位到其大小，也可以为该图像添加ID。

  #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;}

这应该照顾它。您可以将css放在标题中的样式标记中，或者更好地放在单独的css文件中。

Answer 3

请勿使用中心标签。它的失败已经过时了。而是使用保证金：0自动;这将使内容居中。并使用max-width属性作为innerDiv id。这是一个很好的参考资料。 http://www.w3schools.com/cssref/pr_dim_max-width.asp

html div设置限制内部div宽度

3 个答案: