Question

我正在使用网站。我有一个div的问题

    <div class="parent">
      <div class="child" style="display:inline-block; z-ndex:1000;">
        <img src="" style="max-width:100%; max-height:100%"/>
      </div>
    </div>

HTML：

   .parent {
       clear: both;
       float: left;
       padding:0 2%;
       width: 98%;
       padding:0 1%;
       display: block;
       height:557px;
   }

我有这样的html，我希望我的孩子div环绕图像，所以我给它内联块。但如果图像很大，我会从父div中获取图像。有没有办法在父div中修复它。请帮忙。

Answer 1

你应该设置一些样式属性.i.e。外部[parent] div的高度和宽度，以便内容受到它的限制。

      <div class="parent" style="height: 80px; width: 80px;">
        <div class="child" style="display:inline-block;">
          <img src="" style="max-width:100%; max-height:100%"/>
        </div>
      </div>

Answer 2

尝试为您的父母和Child Div设置一些高度和宽度。

图像尺寸大于父Div

的示例代码

<div class="parent" style="background-color: pink; height: 100px; width: 100px;">
      <div style="display: inline-block; background-color: black; height: 80px; width: 80px;" class="child">
        <img style="max-width:100%; max-height:100%" src="../somepath.JPG">
      </div>
</div>

Answer 3

提及height中固定的width和pixel与父DIV。{Image将修复父DIV

看看Fiddle。实际上图像大小200*200 px，父DIV大小100*100 px。现在它将修复

HTML：

<div class="parent">
  <div class="child" style="display:inline-block; z-ndex:1000;">
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="max-width:100%; max-height:100%"/>
  </div>
</div>

CSS：

.parent 
      {
       clear: both;
       float: left;
       padding:0 2%;
       width: 100px;
       padding:0 1%;
       display: block;
       height: 100px;
       }

Answer 4

现在，您的.parent div已width:98%，因为它在%中，div将达到您用于查看当前视口或浏览器窗口的宽度98%网站内容无论内容如何..

因此，即使.parent div中的图片较大，div也只会获得98%窗口。

1。）如果你想让你的图像保持原始大小并且父母应该包裹，你可以这样做：

从width:98%移除.parent并从图片中删除max-width。

2。）如果您希望根据.parent

获得的宽度调整图片大小

您可以使用现在使用的相同代码。

父div不包含图像

4 个答案: