CSS div高度百分比不起作用

Question

所以我在 div #anniversary-img-container有一個 img #anniversary-img 。 我只是想讓 img 在您調整瀏覽器窗口的大小時自動調整大小（最大大小為15em x 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 演示

刪除 html 標記中的width="" height=""是一個更好的做法，這樣您就不需要在 css 文件中使用!important ！