Скачать или смотреть How to Horizontally Resize an Image Using CSS

Discover effective techniques to `resize images horizontally` using CSS, ensuring they fit properly without distorting dimensions.
---
This video is based on the question https://stackoverflow.com/q/68313587/ asked by the user 'blue emperor' ( https://stackoverflow.com/u/16413011/ ) and on the answer https://stackoverflow.com/a/68313743/ provided by the user 'Weyers de Lange' ( https://stackoverflow.com/u/16024569/ ) 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: how can I resize an image ONLY HORIZONTALLY using 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.
---
How to Horizontally Resize an Image Using CSS

Resizing images can sometimes be tricky, especially if you want to maintain their original height while expanding their width. Whether you're working on a personal project or enhancing your website's design, enabling a seamless image display can significantly improve user experience. In this guide, we'll address the problem of resizing images horizontally using CSS, providing a straightforward approach you can implement effortlessly.

The Challenge: Resizing an Image

Imagine you're building a simple website and want to make sure your image fits perfectly from left to right while keeping its height intact. The typical approach is to use the width property in CSS, usually set to 100%. However, doing this often results in the image becoming larger rather than just stretching horizontally, which is not the desired effect.

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

Understanding the Problem

When you apply the width: 100% style to an image, the browser automatically scales it up based on its aspect ratio, leading to an undesired outcome where the image looks distorted or simply enlarged. Instead, your goal is to adjust the image so that it stretches just horizontally while maintaining its original height ratio.

The Solution: Use Background Images

One effective technique to achieve horizontal resizing without losing height is to utilize CSS's background-size property. By setting the image as a background image of a div element, you can control both the width and height independently.

Step-by-Step Guide

Set Up Your HTML Structure

Start by creating a simple HTML structure. Instead of using an <img> tag, you will create a <div> that serves as a container for your background image.

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

Apply CSS Styles

Next, you will need to add CSS that styles the div and sets the background image. Ensure the image fills the div correctly.

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

Explanation of CSS Properties

background: This property allows you to set your desired image as the background for the div.

background-repeat: no-repeat: This setting ensures that the background image does not repeat.

background-size: 100% 50%: Here’s the magic! You can set the width to be 100% of the containing element while keeping the height to 50%. This effectively stretches the image horizontally without altering its intended height.

Conclusion

By using the background-size property instead of the traditional image width property, you can effortlessly create a visually appealing design that maintains the proper aspect ratio. This method not only resolves the issue of stretching images but also enhances your website's overall aesthetics.

Feel free to experiment with these properties in your projects, and enjoy the polished effect of horizontally resized images!