Question

我遇到了一个问题，为了清楚起见，我会在这里进行简化（这真让我感到沮丧）。

我有一个容器，里面有两个div（一个里面有一个图像，将调整大小），如下所示：

HTML

<div id="container">

<div id="block1">

    <img src="images/clank.png">

</div>

<div id="block2">

</div>

</div>

CSS

#container {
height:350px;
background-color: #000

}

img {

max-width: 60%;
height: auto;

}

#block1 {
background-color: #fff;
float:left;
height:auto;
width: auto;
border-style: solid;
border-width: 1px;
border-color: #000;
}

#block2 {
background-color: #456545; 
height:100%;
overflow: hidden;
}

Here is an image with the problem

上图说明了我的问题。在＃block1内调整图像大小后，＃block1的高度减小，与图像的高度相同（这就是我想要的）。但是，我希望宽度也可以这样做，但这不会发生。宽度保持不变，因此＃block1的宽度不会更改为等于图像的新大小（它保持原始图像的大小）。我希望＃block1的宽度根据新的较小尺寸的图像自动缩小。

这可以通过CSS吗？

由于

Answer 1

<强>更新

如果您不希望<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> <style> body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:75%; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #chatbox p { padding:1em; margin:1em; background:#E6E6E6; border:1px solid #BDBDBD; -moz-border-radius:4px; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; } </style> </head> <body> <div id="wrapper"> <div id="menu"> <p class="welcome">Welcome</p> <p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p> <div style="clear:both"></div> </div> <div id="chatbox"> <p>Here's our chat data</p> </div> <form name="message"> <input name="usermsg" type="text" id="usermsg" size="63" /> <button type="button" id="submitmsg" value="send">Send</button> </form> </div> <script> $(document).ready(function(){ $('#submitmsg').click(function(){ var message = $('#usermsg').val(); $('#chatbox').append('<p>' + message + '</p>'); $('#usermsg').val(''); }); }); function close_window(url){ var newWindow = window.open('', '_self', ''); //open the current window window.close(url); }; </script> </body> </html>元素占据包含img的完整维度，则可以将div元素按容器的百分比缩放通过设置img属性的百分比来设置高度和宽度。请参阅下文，了解我的意思。

旧：

您无法padding为max-width设置60%，并希望容器的宽度与img的宽度相匹配。我删除了img限制后见下文：

＆＃13;

max-width

＆＃13;

*, :before, :after {
 box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#container {
  height: 350px;
  background-color: #000
}

img {
  width: 100%;
  padding: 0 50% 50% 0;
}

#block1 {
  background-color: #fff;
  float: left;
  height: auto;
  width: 20%; /* change this to see that the div fits the image properly. */
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

#block2 {
  background-color: #456545;
  height: 100%;
  overflow: hidden;
}

＆＃13;

调整图像内部大小时如何自动调整容器宽度？

1 个答案: