How to scale html images proportionally? Summary of html img image scaling methods (with examples)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to scale html images proportionally? Summary of html img image scaling methods (with examples)

寻∝梦

Sep 01, 2018 pm 04:12 PM

html img

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>图片缩小不变形实例 www.php.cn</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>

Copy after login

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】

How to set the font size of the font tag in html? Introduction to the usage of html font tag attribute

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn