0

我有以下设置

<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 上的“中心”或“宽度”等内容不会超出outerDiv 的设置。我曾尝试在外部 div 上使用“最大宽度”，但这似乎不起作用（我不是 html/css 专家 - 所以我可能做错了）。

非常感谢您的帮助！

4

3 回答 3

2

max-width物业可以帮助你。

从标签中删除width属性img并编写额外的 css 代码：

<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
于 2012-09-01T14:33:55.753 回答
0

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 文件中。

于 2012-09-01T14:42:35.353 回答
0

不要使用中心标签。它肯定已经过时了。而是使用 margin: 0 auto; 这将使内容居中。并为 innerDiv id 使用 max-width 属性。这是一个很好的参考来源。http://www.w3schools.com/cssref/pr_dim_max-width.asp

于 2012-09-01T16:28:05.723 回答