How To Resize An Image With HTML - Computer Hope
Có thể bạn quan tâm
![HTML and its corresponding languages.](/jargon/h/html.png)
The steps below guide users wanting to keep an image at its original file size (in KB or MB) and change the display size of the image with HTML (HyperText Markup Language). Although this is possible, we still suggest you resize an image using an image editor to reduce the file size and reduce the download time of the image.
- What program can I use to view, edit, or create images?
When an image's size is changed using the steps below, it still has to load the larger image, even though it appears smaller in the browser.
Resize with HTML
Specify the width and height in your "img src" HTML tag as shown in the example below.
<img src="https://www.computerhope.com/cdn/computer-hope.jpg" width="200" height="40" alt="Computer Hope">How the image appears normally
Using the code above to resize the image
When resizing an image, you must maintain the aspect ratio. Otherwise, the image could become distorted and lose some image quality.
Resize with CSS
Alternatively, resize an image through CSS (Cascading Style Sheets) as shown in the examples below.
img.resize { width:200px; height:40px; } img.resize { max-width:50%; max-height:50%; }In the first example, the actual size in pixels is specified for width and height. Using this option limits the images that use that CSS. Since it specifies a width and height, this method could result in distorted images if it doesn't have a 5:1 aspect ratio.
The second example specifies a percentage of original image size, both width and height, instead of size in pixels. Since a percentage of image width and height is specified, the browser can resize nearly any image and maintain its aspect ratio.
To apply the CSS to an "img src" HTML tag, you would do the following.
<img class="resize" src="https://www.computerhope.com/cdn/computer-hope.jpg" alt="Computer Hope logo small">Using CSS results in shorter img tags, as you only have to specify the class name in the tag to activate the CSS code for that image.
Related information
- Should I add the height and width to the img src tag?
- How to add pictures to an HTML website.
- Where can I find free public-domain images and pictures?
- HTML and web design help and support.
Từ khóa » Html Scale Image To Page Width
-
How To Resize An Image To Fit In The Browser Window? - Stack Overflow
-
How To Resize An Image In HTML?
-
Responsive Web Design Images - W3Schools
-
CSS Object-fit Property - W3Schools
-
How To Resize Images In HTML
-
How To Auto-resize An Image To Fit Into A DIV Container Using CSS
-
HTML Tag: Change The Width Of A Picture In HTML »
-
Making Responsive Images With CSS Properties - BitDegree
-
Setting Height And Width On Images Is Important Again
-
How To Resize Images Using CSS For Responsive Web Design
-
How To Change Image Size In CSS - Javatpoint
-
Resize Image Proportionally With CSS - GeeksforGeeks
-
Resize Images Proportionally While Keeping The Aspect Ratio
-
Can I Change The Size Of An Image? - Codecademy