HTML img 标签四舍五入所有图片

问题描述 投票:0回答:2

请原谅我的无知,因为我是 html 编码的新手。是否可以使用不同的 img 标签来塑造不同的部分?我认为更改图像类名称然后调用该类会起作用,但两个图像仍然具有 img 属性。

我正在使用以下代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 0%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="img_avatar.png" alt="Avatar" style="width:200px">

</body>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img1 {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="img_avatar.png" class="img1" alt="Avatar" style="width:200px">

</body>

</html>

注意:在 Power Automate 中发送电子邮件的格式需要为 html。

html image viewport border-radius
2个回答
0
投票

你也可以对两个 img 标签使用相同的类

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 0%;
}
.img1{
    width: 200px;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="./img/IMG_0158.JPG" class="img1" alt="Avatar" >

</body>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img1 {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="./img/IMG_0158.JPG" class="img1" alt="Avatar" >

</body>

</html>


0
投票

类选择器前面应该有

.
。并且您的 html 中不应有多个 body 和 head 标签。试试这个:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .rounded { border-radius: 50%; }
   </style>
</head>
<body>
    <h2>Square Images</h2>
    <img src="img_avatar.png" alt="Avatar" style="width:200px">

    <h2>Rounded Images</h2>
    <img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px">
</body>
</html>

假设您使用的是 gmail,可能不允许使用样式标签,然后使用以下代码:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h2>Square Images</h2>
    <img src="img_avatar.png" alt="Avatar" style="width:200px">

    <h2>Rounded Images</h2>
    <img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px;border-radius:50%;">
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.