How To Stretch An Image Horizontally With CSS

Trang chủ » Html Background Image Stretch Horizontally » How To Stretch An Image Horizontally With CSS

Có thể bạn quan tâm

We handpick every product we feature. We may earn commission from the links on this page.Small Business|Business & Workplace Regulations|Create Business NamesHow to Stretch an Image Horizontally With CSSBy Kevin Lee, Contributor
Stretch your images using code instead of image-editing programs.
Stretch your images using code instead of image-editing programs.Getty

One way to breathe new digital life into an image is to alter its width. You could do that using an image editor, but CSS can often get the job done faster. Learn how to add a CSS reference to an image and you can stretch it horizontally to any width you like. Cascading Style Sheets give you the ability to try out new looks for your business Web pages quickly, as you can apply them to elements throughout your site instantly, using nothing but a few lines of simple code.

  1. Open an HTML document that has an image and find the document's section. Paste the code shown below inside that section.This code creates a CSS class named stretchX. The width parameter's value, 400px, tells browsers to make any element that references the class 400 pixels wide. It also creates a class named stretchXY that has width and height values.
  2. Move to your document's section and locate an img tag that defines an image. It will look similar to the example shown below:
  3. Add "class="stretchX" after the word "img" so that your img tag looks similar to the one below:
  4. Save your document and view it in a browser. The image's width will be 400 pixels wide because that's the value defined in the stretchX CSS class. Return to your document and change 400 to any other value to make the image stretch to that width.

More For You

Formatting an Image in a Text Post on Tumblr

Formatting an Image in a Text Post on Tumblr. A dazzling ocean sunset, a basket of kittens...If your photo comes out too small, let Tumblr enlarge it automatically.

How to Make Images Have Borders in Blogger

How to Make Images Have Borders in Blogger. You can adjust the layout of your Blogger...PowerPoint includes a gallery of shape styles for borders.

How to Make a Navigation Bar Extend to the Bottom of the Page in CSS

How to Make a Navigation Bar Extend to the Bottom of the Page in CSS. Left navigation bars...Your "About Us" page should tell your visitors about your company culture.

How to Customize WordPress Widgets for Rounded Corners

How to Customize WordPress Widgets for Rounded Corners. Rounded corners are seen in Web...Adjust the CSS margin attribute to remove spacing between widgets.

How to Take an Image from My Computer & Transfer It to a Word Document

How to Take an Image from My Computer & Transfer It to a Word Document. Microsoft Word...It's easy to insert external images in Word documents.

References

  • W3Schools.com: CSS Width Property
  • New Perspectives on Adobe Dreamweaver CS5, Comprehensive; Kelly Hart, Mitch Geller

Advertisement

Article continues below this ad

Resources

  • HTMLGoodies: Cascading Style Sheets, HTMLGoodies CSS Tutorials and Resources
  • Bloomberg Businessweek: The 10 Commandments of Web Design

Tips

  • You can also replace 200px with a percentage value such as 300% in the CSS class. This allows you to stretch an image by a percent instead of by a pixel amount.
  • If your img tag already contains a class reference, append your class name after the existing class name that appears in the attribute definition. For example, if the current img tag begins with
  • Replace the img tag's reference to "stretchX" with "stretchXY" if you'd like to change the image's width and height. If you do this, adjust the width and height values in the stretchXY class to achieve the desired image width and height on your Web page.
  • Experiment with image stretching on company logos or other images that contain text. You may discover a new appealing look that works better than the existing one.
  • Any time you increase an image's dimensions using CSS, the image's quality decreases. This may not be noticeable with small increases, but it can become a problem if you make your images too large. Examine your resized images carefully before placing them on the Web.
Kevin LeeContributor

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.

Từ khóa » Html Background Image Stretch Horizontally