Скачать или смотреть How to Properly Size Images in CSS Using Percentage for Responsive Design

Learn how to effectively size banner images in CSS with percentages to ensure they scale correctly as the screen resizes. Follow our simple guide for a responsive web layout.
---
This video is based on the question https://stackoverflow.com/q/68709883/ asked by the user 'Dunmol' ( https://stackoverflow.com/u/13885235/ ) and on the answer https://stackoverflow.com/a/68709950/ provided by the user 'Shivam' ( https://stackoverflow.com/u/13543600/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Sizing image using % in CSS

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Image Sizing in CSS with Percentages

When designing a website, ensuring that your images scale appropriately based on the viewport can be a challenge. One common problem arises when developers try to size banner images using CSS percentages, but come across issues where the images disappear or don't appear as intended. If you've found yourself asking, "How do I get my banner image to remain 10% of the screen size?", you're not alone. In this post, we’ll explore how to resolve this issue step-by-step.

The Problem: Images Disappearing with Percentages

The original approach to size the banner image using the following CSS code often leads to frustration for developers:

[[See Video to Reveal this Text or Code Snippet]]

While the intent is clear, setting the height using a percentage of the viewport can lead to the entire element disappearing if there’s no defined height for the HTML or body elements. This is due to how percentage-based heights are calculated in CSS, which rely on the parent container's height.

The Solution: Use vh Units for Height

To resolve the issue while ensuring your banner image displays correctly as you resize the browser, you should switch from using percentage heights to viewport height units (vh). Here’s how you can change your CSS to achieve the desired result:

[[See Video to Reveal this Text or Code Snippet]]

Why Use vh Units?

Viewport Height (vh) units provide a responsive way to size elements based on the height of the viewport.

1 vh corresponds to 1% of the height of the viewport, which means that by setting height: 10vh, your banner will always take up 10% of the visible part of the screen, regardless of the actual pixel count of the element's parent.

Advantages of Using this Method

Consistency: With vh, as you resize the browser window, your banner image maintains a consistent size relative to the viewport.

Visibility: This approach minimizes the risk of your elements disappearing. It ensures that your elements display as expected across various devices and screen sizes.

Final Thoughts

By adjusting your CSS to use viewport height units instead of percentages, you can avoid common pitfalls while sizing your banner images in a responsive way. Implementing this solution not only resolves the issue of disappearing images but also enhances the overall usability of your web design.

Now, you’re equipped with the knowledge to confidently size your images in CSS. Happy coding!