Tools, FAQ, Tutorials:
Reducing the Display Size of an Image in HTML
How To Reduce the Display Size of an Image?
✍: FYIcenter.com
If an image embedded inline is too big when displayed in a browser, you can
use "width" and "height" attributes to reduce the image's display size.
The display width and height should be proportional to the actual width and height
of the image. Otherwise, the image will be displayed with a distortion.
Here is a tutorial example of images with reduced sizes:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Image Sizes</title> </head> <body> <h4>Inline Images</h4> <p style="background-color: #eeeeee; padding: 8px;"> Image with the original size: <img src="/moonrise.jpg"" alt="Moonrise" width="69" height="91"/><br/> Image with a reduced size: <img src="/moonrise.jpg"" alt="Moonrise" width="35" height="45"/></p> </body> </html>
If you save the above document as image_sizes.html, and view it with
Internet Explorer, you will see that the same image is displayed with
two sizes as shown below:
Â
⇒HTML Inline Images and Image Maps
⇒⇒HTML Tutorials
2017-03-27, 1055👍, 0💬
Popular Posts:
How to use the JSON to XML Conversion Tool at freeformatter.com? If you want to try the JSON to XML ...
Where to find tutorials on OpenID? Here is a large collection of tutorials to answer many frequently...
How To Merge Cells in a Column? If you want to merge multiple cells vertically in a row, you need to...
How To Pad an Array with the Same Value Multiple Times in PHP? If you want to add the same value mul...
How to use "xsl-transform" Azure API Policy Statement? The "xsl-transform" Policy Statement allows y...