Liquid Web Page Demo
Don't add Height and Width Dimensions to Image code
This web page demonstrates the proper HTML code for placing images on your pages.
The 2 page headers shown below are both the same image but the top image doesn't use the proper code for adding it to a web page.
The original image is actually 1500 pixels in width. The max-width: 100% property included in our style sheet causes both images to conform to the available width of the page It even keeps the image constrained within the paragraph margin settings.
Resize the width of the browser window and watch as only the width of the top image changes.
The bottom image scales in width and height as the window is resized.
Code for top image:
<img src="images/liquid demo-header.gif" width="1500" height="203" style="border: none" alt="Liquid demo">
Note: Code includes image dimensions (width and height)
Code for bottom image:
<img src="images/liquid demo-header.gif" style="border: none" alt="Liquid demo">
When building liquid web pages, Do Not place width and height dimensions in your code.