img标签设置display:block属性时宽度无法设定为100%的解决办法-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

img标签设置display:block属性时宽度无法设定为100%的解决办法

不言

Aug 15, 2018 pm 01:55 PM

css

本篇文章所说的内容是img标签设置display:block属性时宽度无法设定为100%的解决办法，方法很详细，有一定的参考价值，有需要的朋友可以参考一下，希望可以对你有所帮助。

现象

如下代码，img标签设置了display：block，尺寸宽度无法设定为100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
    <p>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
    </p>
</body>
</html>

原因

替换元素和非替换元素

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box,也翻译为“盒子”）。但是不同的元素显示的方式会有所不同，例如p和span不同，而strong和p也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。而根据元素本身的特点可以分为替换元素（replaced element）和非替换元素，非替换元素，在W3C中没有给出明确的定义，但我们可以由替换元素对应着非替换元素，所以可以理解为除了替换元素，其它的就是非替换元素

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素，例如img标签，嵌入的文档（iframe之类）或者applet，这些叫做替换元素。比如img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉；例如input元素的type属性决定是显示输入框，还是单选按钮等。(x)html中的img , input , textarea , select , object都是替换元素。这些元素没有实际的内容，即是个空元素

非替换元素：(X)HTML 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来

img标签为替换元素，替换元素的特性之一就是尺寸由内部元素决定，且无论其 display 属性值是 inline 还是 block。这个特性很有意思，对于非替换元素，如果其 display 属性值为 block，则会具有流动性，宽度由外部尺寸决定，但是替换元素的宽度却不受 display 水平影响，因此，display 水平是无法让尺寸 100%自适应父容器的

解决

解决办法就是，通过设定的width尺寸 100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
    <p>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;width: 100%;">
    </p>
</body>
</html>

display:table，display:block用法区别

css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose

Atas ialah kandungan terperinci img标签设置display:block属性时宽度无法设定为100%的解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

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 Berkaitan

Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles