HTML图片宽高设置|极客教程

HTML图片宽高设置

在网页开发中，经常会用到图片元素来展示图片内容。在HTML中，我们可以通过设置图片的宽度和高度来控制图片的显示效果。本文将详细介绍如何在HTML中设置图片的宽度和高度，并提供相关示例代码。

设置图片宽度和高度

在HTML中，可以使用<img>标签来插入图片。通过设置width和height属性，可以控制图片的宽度和高度。这两个属性可以接受像素值、百分比值或者auto值。

示例代码1：设置图片宽度和高度为固定像素值

<!DOCTYPE html>
<html>
<head>
    <title>设置图片宽高为固定像素值</title>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" width="200" height="150">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，图片的宽度被设置为200像素，高度被设置为150像素。运行该代码，可以看到图片按照指定的宽高比例显示在页面上。

示例代码2：设置图片宽度为百分比值

<!DOCTYPE html>
<html>
<head>
    <title>设置图片宽度为百分比值</title>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" width="50%">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，图片的宽度被设置为父元素宽度的50%。运行该代码，可以看到图片的宽度会根据父元素的宽度进行自适应调整。

示例代码3：设置图片高度为auto值

<!DOCTYPE html>
<html>
<head>
    <title>设置图片高度为auto值</title>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" height="auto">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，图片的高度被设置为auto值，即根据图片的原始高度进行自适应调整。运行该代码，可以看到图片的高度会根据图片的原始高度进行显示。

设置图片宽高比例

除了直接设置图片的宽度和高度外，还可以通过设置style属性来控制图片的宽高比例。通过设置padding-bottom属性，可以实现响应式的图片宽高比例。

示例代码4：设置图片宽高比例为16:9

<!DOCTYPE html>
<html>
<head>
    <title>设置图片宽高比例为16:9</title>
    <style>
        .responsive-img {
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            position: relative;
        }
        .responsive-img img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="responsive-img">
        <img src="https://static.deepinout.com/gk-static/logo.png">
    </div>
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.responsive-img类的padding-bottom属性为56.25%，实现了图片的宽高比例为16:9。运行该代码，可以看到图片按照16:9的宽高比例显示在页面上。

示例代码5：设置图片宽高比例为4:3

<!DOCTYPE html>
<html>
<head>
    <title>设置图片宽高比例为4:3</title>
    <style>
        .responsive-img {
            width: 100%;
            padding-bottom: 75%; /* 4:3 aspect ratio */
            position: relative;
        }
        .responsive-img img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="responsive-img">
        <img src="https://static.deepinout.com/gk-static/logo.png">
    </div>
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.responsive-img类的padding-bottom属性为75%，实现了图片的宽高比例为4:3。运行该代码，可以看到图片按照4:3的宽高比例显示在页面上。

设置图片最大宽度和最大高度

除了设置图片的固定宽度和高度外，还可以通过设置max-width和max-height属性来控制图片的最大宽度和最大高度。这样可以确保图片在不超过指定尺寸的情况下保持原始比例。

示例代码6：设置图片最大宽度和最大高度

<!DOCTYPE html>
<html>
<head>
    <title>设置图片最大宽度和最大高度</title>
    <style>
        .max-img {
            max-width: 100%;
            max-height: 200px;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="max-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.max-img类的max-width属性为100%和max-height属性为200px，实现了图片的最大宽度为父元素宽度，最大高度为200px。运行该代码，可以看到图片在不超过指定尺寸的情况下保持原始比例。

设置图片边框和边距

在HTML中，可以通过设置border属性和margin属性来控制图片的边框和边距。这样可以美化图片的显示效果，增加页面的视觉吸引力。

示例代码7：设置图片边框和边距

<!DOCTYPE html>
<html>
<head>
    <title>设置图片边框和边距</title>
    <style>
        .border-img {
            border: 2px solid #333;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="border-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.border-img类的border属性为2px实线边框和margin属性为10px，实现了图片的边框和边距效果。运行该代码，可以看到图片被添加了2px的实线边框和10px的外边距。

示例代码8：设置图片圆角边框

<!DOCTYPE html>
<html>
<head>
    <title>设置图片圆角边框</title>
    <style>
        .rounded-img {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="rounded-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.rounded-img类的border-radius属性为50%，实现了图片的圆角边框效果。运行该代码，可以看到图片被显示为圆形。

设置图片对齐方式

在HTML中，可以通过设置align属性和float属性来控制图片的对齐方式。这样可以使图片与周围内容对齐，提高页面布局的美观性。

示例代码9：设置图片水平对齐方式

<!DOCTYPE html>
<html>
<head>
    <title>设置图片水平对齐方式</title>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" align="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec odio ultricies luctus.</p>
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置align属性为left，实现了图片的左对齐效果。运行该代码，可以看到图片在文本的左侧对齐显示。

示例代码10：设置图片浮动对齐方式

<!DOCTYPE html>
<html>
<head>
    <title>设置图片浮动对齐方式</title>
    <style>
        .float-img {
            float: right;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="float-img">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec odio ultricies luctus.</p>
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.float-img类的float属性为right和margin属性为10px，实现了图片的右浮动对齐效果。运行该代码，可以看到图片在文本的右侧浮动显示。

设置图片背景和透明度

在HTML中，可以通过设置background属性和opacity属性来控制图片的背景和透明度。这样可以实现图片作为背景显示或者调整图片的透明度。

示例代码11：设置图片作为背景显示

<!DOCTYPE html>
<html>
<head>
    <title>设置图片作为背景显示</title>
    <style>
        .bg-img {
            background-image: url('https://static.deepinout.com/gk-static/logo.png');
            background-size: cover;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="bg-img"></div>
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.bg-img类的background-image属性为图片链接，实现了图片作为背景显示的效果。运行该代码，可以看到页面背景被设置为指定的图片。

示例代码12：设置图片透明度

<!DOCTYPE html>
<html>
<head>
    <title>设置图片透明度</title>
    <style>
        .transparent-img {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="transparent-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.transparent-img类的opacity属性为0.5，实现了图片的透明度为50%的效果。运行该代码，可以看到图片被设置为半透明显示。

设置图片悬停效果

在HTML中，可以通过设置hover伪类和transform属性来实现图片的悬停效果。这样可以为图片添加交互效果，提升用户体验。

示例代码13：设置图片悬停放大效果

<!DOCTYPE html>
<html>
<head>
    <title>设置图片悬停放大效果</title>
    <style>
        .zoom-img {
            transition: transform 0.3s;
        }
        .zoom-img:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="zoom-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.zoom-img类的transition属性和transform属性，实现了图片悬停放大的效果。运行该代码，可以看到图片在悬停时会放大1.2倍显示。

示例代码14：设置图片悬停模糊效果

<!DOCTYPE html>
<html>
<head>
    <title>设置图片悬停模糊效果</title>
    <style>
        .blur-img {
            transition: filter 0.3s;
        }
        .blur-img:hover {
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="blur-img">
</body>
</html>

Output:

HTML图片宽高设置

在上面的示例中，通过设置.blur-img类的transition属性和filter属性，实现了图片悬停模糊的效果。运行该代码，可以看到图片在悬停时会变得模糊显示。

设置图片响应式布局

在HTML中，可以通过设置max-width属性和height:auto属性来实现图片的响应式布局。这样可以使图片在不同设备上自适应调整大小，提高页面的可访问性。

示例代码15：设置图片响应式布局

<!DOCTYPE html>
<html>
<head>
    <title>设置图片响应式布局</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="https://static.deepinout.com/gk-static/logo.png" class="responsive-img">
</body>
</html>