Question

所以我在div #anniversary-img中有一个img #anniversary-img-container。我只是希望img在调整浏览器窗口大小时自动调整大小（最大大小为15em 15em）（以适应较小的显示，如手机）。我尝试了很多东西，但使用百分比高度根本不会影响它。

JSFiddle

HTML 的

<div class ="col1-sec sec" id="col1-sec1">
  <div id="anniversary-container">
    <h2>Welcome</h2>
    <div class="img-container" id="anniversary-img-container">
      <img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
    </div><!-- end #anniversary-img-container -->
    <div id="contact-container">
      <p>1450 W. La Venture Avenue<br />Las Vegas, NV 12345-0000</p>
      <p><span class="contact-text">Phone</span> 123-456-7890</p>
      <p><span class="contact-text">Fax</span> 123-456-7890</p>
      <p><span class="contact-text">Email</span> <a href="mailto:me@yahoo.com">me@yahoo.com</a></p>
    </div><!-- end #contact-container -->
  </div><!-- end #anniversary-container -->
</div><!-- end #col1-sec1 -->

CSS

.sec, .img-container {
    border: 1px solid #D8D8D8;}
#col1-sec1 {
    height: 100%;
    overflow: auto;}
#anniversary-container {
    overflow: auto;
    width: 100%;}
#anniversary-img-container {
    height: 15em;
    width: 15em;
    margin-left: 2em;
    margin-bottom: 1em;
    float: left;} /* make container proportionate to img */
#anniversary-img {
    max-width: 100%;
    max-height: 100%;}
#contact-container {
    width: 40%;
    float: right;
    margin-right: 5em;
    margin-top: 2em;
    text-align: left;}
.contact-text {
    font-weight: bold;}

编辑：解决高度和高度问题HTML文件和设置中的宽度（＃anniversary-img）：

#anniversary-img-container {
    max-height: 15em;
    max-width: 15em;}

Answer 1

您可以随时为图像容器使用背景图像，它可以让您更好地控制图像的行为。像这儿- http://jsfiddle.net/mpx6vmL4/2/

#anniversary-img-container {
    height: 15em;
    width: 15em;
    margin-left: 2em;
    margin-bottom: 1em;
    float: left; /* make container proportionate to img */
    background: url(images/anniversary-img.jpg) no-repeat; /*center center maybe?*/
    background-size: cover; /*contain or custom value*/
} 
/* #anniversary-img {
    max-width: 100%;
    max-height: 100%;} */

尝试使用背景属性。

Answer 2

正如您所说，图像嵌套在容器中：

<div class="img-container" id="anniversary-img-container">
  <img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
</div><!-- end #anniversary-img-container -->

首先，您应该确保容器中有width和height您希望他（以及之后的图像）。因为我猜你希望它能够响应并伸展到窗口屏幕，所以将它的宽度设置为100％是一个很好的做法：

#anniversary-img-container {
  width: 100%;
  height: auto;
}

之后，您要确保图像始终适合容器。我们将使用!important覆盖您在html标记中设置的width="862"，虽然设置其max-width: 100%以确保，但它不会高于862px：

#anniversary-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

这是一个基本的构建。查看JS FIDDLE DEMO

最好删除html标记内的width="" height=""，这样就不需要在css文件中使用!important了！

CSS div高度百分比不起作用

2 个答案: