时间戳

首页 > 解决方案 > 我无法正确指定图像的宽度和高度

html - 我无法正确指定图像的宽度和高度

问题描述

我使用以下代码设置了此图像的宽度和高度：

<img src="assets/desktop/image-phone-and-keyboard.jpg" alt="image-phone-and-keyboard" width="370" height="720">

和

<img src="assets/desktop/image-glass-and-keyboard.jpg" alt="image-glass-and-keyboard" width="670" heigth="720">

但是，当使用数字规则时，它给了我其他维度：

所以我不明白为什么我有这些尺寸，因为我使用这个重置来设置应用于图像的 margin:0 和 padding:0 。

我的整个代码：

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="reset" href="./CSS/reset.css">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="stylesheet" href="./CSS/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@500;900&display=swap" rel="stylesheet">



<title>Frontend Mentor | Typemaster pre-launch landing page</title>
</head>

<body>
<div class="wrapper">

    <section class="middle">
        <div class="middle-left">

            <div class="image-phone-and-keyboard">
                <img src="assets/desktop/image-phone-and-keyboard.jpg" alt="image-phone-and-keyboard" width="370" height="720">
            </div>
            <div class="image-glass-and-keyboard">
                <img src="assets/desktop/image-glass-and-keyboard.jpg" alt="image-glass-and-keyboard" width="670" heigth="720">
            </div>
        </div>
    </section>
    </main>
</div>

CSS：

@charset "UTF-8";
html {
box-sizing: border-box;
}

* {
box-sizing: inherit;
}

.wrapper {
margin: 0 auto;
width: 1440px;
}

img {
border-radius: 5%;
}

.middle {
display: flex;
justify-content: space-between;
}

.middle-left {
display: flex;
justify-content: space-between;
width: 1080px;
}

标签： htmlcssimage

解决方案

首先在 html 文件中以 px 为单位给出每个 img 元素的 width 和 height 属性值。其次在 * 元素的 css 文件中执行此操作

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

推荐阅读