CSS div高度百分比不起作用

Question

So I have an img #anniversary-img inside a div #anniversary-img-container . I simply want to have the img to resize automatically (with the max size being 15em by 15em ) as you resize the browser window (to accommodate smaller displays such as phones). I have tried many things but using a percent height doesn't affect it at all.

JSFiddle

<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 -->

.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;}

EDIT: Solved by removing height & width (of #anniversary-img) in HTML file and setting:

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

Answer 1

You could always use a background-image for the image-container, it gives you more control over the behaviour of the image. Like here 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%;} */

Try to play with the background attributes.

Answer 2

As you have said, the image is nested inside a container:

<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 -->

So first of all, you should make sure, that the container has the width and height you want him to be (and afterwards although the image). As I guess you want it to be responsive and stretch to the window screen, its a good practice to set its width to 100%:

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

Afterwards, you want to make sure, that the image always fits the container. We will use !important to override the width="862" you have set inside your html markup, and although set its max-width: 100% to make sure, it does not upscale higher then 862px:

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

Thats a basic build up. Check the JS FIDDLE DEMO

It would be a better practice to remove the width="" height="" inside of your html markup, so that you do not need to use !important inside your css file!