"; 2. Use CSS styles Control the width and height properties."> How to change image size-HTML Tutorial-php.cn

How to change image size

不言
Release: 2021-04-15 15:26:43
Original
216617 people have browsed it

Methods to change the image size: 1. Change the width and height in the HTML tag, code such as "img src="..." width="..." height="..."> "; 2. Use CSS styles to control the width and height attributes.

How to change image size

The operating environment of this article: Windows7 system, Dell G3 computer, HTML5&&CSS3.

When we design web pages, sometimes the images may not match the size. So how can we change the image size in the code? This article will introduce to you how to change the size of pictures?

We have two ways to change the size of the image:One is to change the width and height within the HTML tag; the other is to use CSS styles to control the width and height attributes.

Let’s first look atChanging the image width and height in the HTML tag

Use width directly in the image img tag and height attributes can control the width and height of the image.

The code is as follows

     
How to change image size
Copy after login

The effect is as follows (the original image is 1072x768px):

How to change image size

##We can set the width and height directly in the image tag, It will seem intuitive.

Then let’s take a look

Use CSS styles to control the width and height attributes

We use the same picture, the code is as follows

      
How to change image size
Copy after login
The effect is as follows: the picture also It became 150x150px

How to change image size

The above is the detailed content of How to change image size. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!