CODEWITHSUNDEEP
htmlcssweb
user5041486
user5041486

Reputation:

When to Use Width and Height Property in CSS?

This is the html:

<section class="section-meals">
        <ul class="meals-showcase">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/1.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/2.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/3.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/4.jpg">
                </figure>
            </li>
        </ul>
</section>

Here is the css:

.section-meals {
    padding: 0;   
}

.meals-showcase {      /*This is a ul*/
    list-style: none;
    width: 100%;
}

.meals-showcase li {   /*This is a li element inside of a ul*/
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {       /*This is a figure html element inside of a li*/
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.meal-photo img {     /*This is a img element inside of a figure element*/
    opacity: 0.7;
    width: 100%;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
}

.meal-photo img:hover {
    opacity: 1;
    transform: scale(1.03);

}

In the above css code I am a little confused when to set the width and height property in the css.

For example in .meal-photo, I set the width to 100% to make sure that the figure html element will have the exact same width of its parents which is .meals-showcase li. But for .meal-photo img is the height property automatically inherited from .meal-photo which is its parent. Since whether I set it or not the height doesn't change for the image.

Upvotes: 3

Views: 2222

Answers (3)

Acrux
Acrux

Reputation: 406

It really depends on how you want the responsiveness of your webpage to work. If you use

   width:100%;

then when you resize your browser to half of the screen crosswise, your width will be browser width will be cut down in half, making your width 25% of the original. Using height does the same but for height.

To set the width to 100% of the parent div, use

min-width:100%;

To make it responsive based on height, make sure to set a height for the parent div. You can use vh or vw to set measurements based on the height or width of your screen. Ex:

min-height:50vh;

Upvotes: 0

itsols
itsols

Reputation: 5582

The shortest answer is that you use the width and height when you want to explicitly specify those values. If not, default values are used, depending on the element.

With regard to DIVs, the default width is 100%. So if you don't mention the width, it extends end to end. But the height is not so. Also like you've correctly noticed, the 100% means, up to the width of its parent.

As for img tags, they take the default dimensions of the image. So if you even give a value like width:150px and leave height:auto, the height scales according to the proportion of the width.

But there are some other elements like the span tag. Its default width is the width of the contents.

In all of the cases, pay attention to the padding and margins of both the element being scaled and the parent object. They affect the appearance.

Upvotes: 1

Frnak
Frnak

Reputation: 6802

To set the image width to 100% of the parent element you need to use 

max-width: 100%

Same for height.

Upvotes: 0

Related Questions