Home > Article > Web Front-end > How to scale html images proportionally? Summary of html img image scaling methods (with examples)
This article mainly introduces the introduction and usage examples of equal scaling of html img tag images. Finally, there is a summary of equal scaling of html img tag images. Next, let us read this article together.
First let’s take a look at how to scale html img images in equal proportions:
In DIV CSS layout for image list or image layout, the image is not a fixed width and height size , but the image occupancy is a fixed width and height. At this time, if you use CSS to fix the image size (width and height), if the image is not proportionally sized relative to this position, then the image will be deformed, making the image uncomfortable. Clear. At this time, I want the image to be scaled proportionally without deformation. How to solve this problem? CSS images can be reduced without deformation, images can be automatically reduced, and images can be reduced proportionally without deformation.
html There are two solutions to the scaling of img tag images:
1. Make the image and layout width and height proportional, so that CSS sets the dead width and height. The picture is also scaled down and the picture will not be deformed.
For example, Taobao requires store owners to upload product cover images that are square. Why? Because the picture display list has a square layout. This requires uploading a suitable square product cover image to prevent the image from deforming.
Therefore, if possible, we should keep the layout width and height of the home page and picture list page consistent. When uploading pictures, the pictures should be processed first to enlarge the size in equal proportion to the layout width and height.
2. Use CSS max-width and max-height to automatically reduce the image proportionally
It’s very simple. We need to use max-width and max-height, so that we can set the maximum size of the object image. Width and maximum height, so that the image will be scaled proportionally, but the image will be relatively undeformed and clear.
The following DIVCSS5 uses the example comparison method to let everyone master the CSS control image reduction and non-deformation skills.
Next, let’s look at the case about html img image scaling:
There is a DIV box here (the DIV class is named "tupian") and the CSS width and CSS height are conveniently 300px and 100px both set 1px black borders, and place a picture inside (the original width of the picture is 650px and the height is 406px). And fix the image width and height through CSS.
All the codes for scaling the html img tag image:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片缩小不变形实例 m.sbmmt.com</title>
<style>
.tupian{ border:1px solid #000; width:300px; height:100px}
.tupian img{width:300px; height:100px}
</style>
</head>
<body>
<div class="tupian">
<img src="img.jpg" />
</div>
</body>
</html>The code will not display the effect because the image is not placed, so you can make up for it by yourself.
Use CSS to fix the height and width of the image within the object, so that if the image is not scaled down proportionally, the image will be deformed.
What I said before is almost the same, let’s start with the summary now:
CSS DIV image shrinks without deformation Summary: The best solution is to start from the design of the image itself, and transform the image Design the image to be proportional to the width and height in the layout. For example, when you layout the image, the width is 300px and the height is 200px. Then when you design the image material, the width and height of the image you add can be 600px wide, 400px high, or 900px wide and 600px. High, so that pictures of equal proportions can ensure that the real picture will not be deformed after being reduced and displayed completely.
【Editor's Recommendation】
What is the code for adding images in HTML? How to add image path correctly in html?
The above is the detailed content of How to scale html images proportionally? Summary of html img image scaling methods (with examples). For more information, please follow other related articles on the PHP Chinese website!