CODEWITHSUNDEEP
htmlcss
universesurfer
universesurfer

Reputation: 357

Width Attribute Responds in CSS, But Height Does Not

My apple-pie-icons image in CSS is not responding to any height attribute. It responds to width, but not height.

Could I be including it in the wrong div?

I've tried using pixels and height percentages - no response.

What am I doing wrong?

HTML 

`<div class="container">

  <div>



    <div>
      <img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
      <h1>Apple Pie</h1>
    </div>

    <div id="description-container">
        <div id="Apple-pies">
        This was my grandmother's apple pie recipe. I have never seen another one
        quite like it. It will always be my favorite and has won me several first place
        prizes in local competitions. I hope it becomes one of your favorites as well!
        </div>

        <div class="apple-pie-icons">
          <img src="images/recipe-info.png">
        </div>

    </div>



</div>

`

CSS 

* {
  font-family: Arial, Verdana, monospace;
}

.container {
 width: 80%;
}

 img {
  position: relative;
  width: 100%;
  height: 500px;

}

h1 {
  position: absolute;
  top: 175px;
  color: white;
  width: 100%;
  left: 32%;
  font-size: 300%;

}

#description-container{
  width: 650px;
  height: 800px;
  margin: 50px 200px 0px 200px;
}

#Apple-pies {

}

.apple-pie-icons{
  display: inline-block;
  height: 100px;
  float: left;
  width: 80%;

 }

Upvotes: 1

Views: 1037

Answers (3)

Michael Coker
Michael Coker

Reputation: 53674

The icon is an image, and your CSS is defined as

img {
  position: relative;
  width: 100%;
  height: 500px;
}

If you want to change the height, you can either change the height attribute there, or give the image a class and change the height that way (change the image tag to <img class="apple-pie-image" src="images/recipe-info.png"> and style via .apple-pie-icons .apple-pie-image { height: 1000px; }), or set the height of the image itself to 100% and then change the height of the parent, which is .apple-pie-icons in this case.

You also have this image (<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">) which has an inlinewidth and height style in the tag. It's worth noting that this image will not respond to height or width styles defined in your CSS since the inline styling will overwrite any other CSS.

Upvotes: 1

Ryan Green
Ryan Green

Reputation: 538

Try targeting the image itself with the height style.

Right now you're just setting a height to the wrapping div:

.apple-pie-icons {
  display: inline-block;
  height: 100px;
  float: left;
  width: 80%;
}

Try...

.apple-pie-icons img {
     height: 100px;
     max-width: 100%;
}

or something like

.apple-pie-icons img {
   height: 100%;
   width: auto;
}

Any way to specifically target the image within the div that you're wanting to style.

Upvotes: 0

Andrew Wynham
Andrew Wynham

Reputation: 2398

It's possible that your image is growing the div even though you don't want it to in order to maintain it's aspect ratio. Try adding a more specific class to limit the images size or inspect in your browser to see what is overriding the divs styles.

Upvotes: 0

Related Questions