如何在图像尺寸被更改时,使图像的边框呈圆形而不是椭圆形?

huangapple go评论65阅读模式
英文:

How to make a circular border around image instead of ellipse when image dimensions have be Altered?

问题

以下是要翻译的内容:

如标题所示,我想在我的图片周围添加一个圆形边框,我已经知道 border-radius: 50%;,但由于我的图片尺寸已更改,它变成了椭圆。那么,如何在我的图片周围放置一个圆形边框呢?

如何在图像尺寸被更改时,使图像的边框呈圆形而不是椭圆形?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Visit Citrus County</title>
</head>
<body>
    <div class="block1">
        <h1 id="title">Welcome to Citrus County</h1>
        <h2 id="sub-title"> Home of the Manatees, and Great Wildlife!</h2>
    </div>
    <div class="block2">
        <h1 id="things"> Top Three Activites to do in <span id="citrus-county">Citrus County.</span></h1>
        <div id="activites">
            <img id="kayaking" src="images/kayaking.jpg">  
            <img id="swim" src="images/swim-with-manatee.jpg">
            <img id="hike" src="images/hiking.jpg">
        </div>
    </div>
</body>
</html>

Code ->

英文:

As the title says, I want to add a circular border around my images, I already know about

border-radius: 50%;

but since my image dimensions have changed, it makes an ellipse. How do I put a circular border around my image then?
如何在图像尺寸被更改时,使图像的边框呈圆形而不是椭圆形?

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
    &lt;title&gt;Visit Citrus County&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;block1&quot;&gt;
        &lt;h1 id=&quot;title&quot;&gt;Welcome to Citrus County&lt;/h1&gt;
        &lt;h2 id=&quot;sub-title&quot;&gt; Home of the Manatees, and Great Wildlife!&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class=&quot;block2&quot;&gt;
        &lt;h1 id=&quot;things&quot;&gt; Top Three Activites to do in &lt;span id=&quot;citrus-county&quot;&gt;Citrus County.&lt;/span&gt;&lt;/h1&gt;
        &lt;div id=&quot;activites&quot;&gt;
            &lt;img id=&quot;kayaking&quot; src=&quot;images/kayaking.jpg&quot;&gt;  
            &lt;img id=&quot;swim&quot; src=&quot;images/swim-with-manatee.jpg&quot;&gt;
            &lt;img id=&quot;hike&quot; src=&quot;images/hiking.jpg&quot;&gt;
            
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Code ->

答案1

得分: 1

给定图片宽度和 aspect-ratio:1

img {
  width: 200px;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid red;
}
<img id="kayaking" src="images/kayaking.jpg">
英文:

Give image width and aspect-ratio:1.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

img {
  width: 200px;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid red;
}

<!-- language: lang-html -->

&lt;img id=&quot;kayaking&quot; src=&quot;images/kayaking.jpg&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月11日 08:30:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76223391.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定