简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

用css怎么设置img的图片大小

WBOY
Lepaskan： 2021-11-29 15:40:35
asal
22275 orang telah melayarinya

在css中，可以利用width和height属性来设置img元素图片的大小，width属性用于设置元素的宽度值，height属性用于设置元素的高度值，语法为“img元素{width:宽度值;height:高度值;}”。

用css怎么设置img的图片大小

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

用css怎么设置img的图片大小

在css中，可以利用width和height属性来设置img的图片大小，示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>123</title>
    <style type="text/css">
    .tupian{
        width:150px;
        height:150px;
    }
</style>
  </head>
  <body>
<img src="1115.08.png" class="tupian">
<p>上面是设置了大小，下面没设置大小</p>
<img src="1115.08.png">
  </body>
</html>
Salin selepas log masuk

输出结果：

15.png

上述示例中，同时设置了width和height属性，想要实现等比例缩放大小，只需要设置一个属性就可以了。示例如下：

当只添加width:150px;样式时，输出结果：

17.png

当只添加height:150px;样式时，输出结果：

16.png

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci 用css怎么设置img的图片大小. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：css怎样去掉h1的粗体样式 Artikel seterusnya：CSS里怎么做图片点击有框的效果
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
WordPress 6.0 (add_editor_style) tidak memuatkan style.css dalam editor Gutenberg Saya mengikuti kursus UdemyWordPress untuk mencipta tema blok WordPress tersuai. Saya berj...
daripada 2023-11-12 20:37:50
0
2
261
CSS mendahului sifar untuk perpuluhan yang tidak berfungsi dengan nombor yang besar Baru-baru ini saya menghadapi masalah di mana saya mencipta senarai tersusun dengan lebih ...
daripada 2023-11-07 10:35:53
0
1
236
Ralat Sass: Fail telah dimuatkan: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; Saya menggunakan rangka kerja quasar dan semasa menyusun projek saya, saya mengalami ralat...
daripada 2023-11-06 21:38:55
0
1
219
Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS? Hai semua, baru-baru ini saya menghadapi masalah. Saya cuba untuk menetapkan latar belakan...
daripada 2023-11-06 13:59:13
0
1
240
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！