Question 44491 in Html Question posted in
Some basic documentation can be found here.

HTML img tag rounding all images

Please forgive my ignorance as I’m pretty new to html coding. Is it possible to use different img tags to shape different sections? I thought changing the image class name and then calling that class would work, but both images still take the img properties.

I’m using the below code:

<!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>

Note: The format needs to be html for sending email in Power Automate.

Tags:

2

Answers


  1. 0

    Class selector should have . before it. And you should not have more than one body and head tag in your html. Try this:

    <!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>

    Assuming you are using gmail maybe style tag not allowed then use bellow code:

    <!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>
    Login or Signup to reply.
  2. 0

    you can also use same clases for both img tags

    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search