英文:
Fit one image into another image
问题
以下是您要求的中文翻译：
我正在尝试将杰瑞老鼠的图像适应边界图像，但无法做到像这样 我想要实现的效果。
我在这里所做的是 -->
取一个父级 div，在其中有一个带有边界图像的图像标签，并尝试将米奇老鼠的图像放在边界图像的背景中。
我的 index.html 文件
<body>
<div class="parent">
<img src="images/circle-2.png" class="boundary"/>
</div>
</body>
我的 app.css 文件
.boundary{
width: 300px;
height: 300px;
width: fit-content;
background-repeat: no-repeat;
background-image: url(./images/mickey.jpeg);
background-position: center;
background-size: 69%;
background-clip: content-box;
}
div {
display: flex;
justify-content: center;
}
提前感谢您。
英文:
I'm trying to fit jerry mouse image in the boundary image, but unable to do it
like this
this i want to achieve
what I have done here is -->
taken one parent div in which I have one image tag with boundary image, and trying to put mickey mouse image in the bacground of boundary image,
my index.html file
<body>
<div class="parent">
<img src= "images/circle-2.png" class = "boundary"/>
</div>
</body>
my app.css file
.boundary{
width : 300px;
height: 300px;
width: fit-content;
background-repeat: no-repeat;
background-image: url(./images/mickey.jpeg);
background-position: center;
background-size: 69%;
background-clip: content-box;
}
div {
display: flex;
justify-content: center;
}
Thanku in advance
答案1
得分: 1
你可以使用 background-size: contain; 来实现这个效果。
.boundary{
width : 300px;
height: 300px;
width: fit-content;
background-repeat: no-repeat;
background-image: url("https://static.vecteezy.com/system/resources/previews/023/814/090/non_2x/cartoon-character-in-free-png.png");
background-size: contain;
background-position: center;
}
<body>
<div class="parent">
<img src="https://static.vecteezy.com/system/resources/previews/001/192/291/non_2x/circle-png.png" class="boundary"/>
</div>
</body>
英文:
You could achieve this using background-size: contain;.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.boundary{
width : 300px;
height: 300px;
width: fit-content;
background-repeat: no-repeat;
background-image: url("https://static.vecteezy.com/system/resources/previews/023/814/090/non_2x/cartoon-character-in-free-png.png");
background-size: contain;
background-position: center;
}
div {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<body>
<div class="parent">
<img src= "https://static.vecteezy.com/system/resources/previews/001/192/291/non_2x/circle-png.png" class = "boundary"/>
</div>
</body>
<!-- end snippet -->
答案2
得分: 0
以下是翻译好的部分：
我不确定准确的标准是什么。负责创建这个圆形的关键CSS属性/值是：border-radius: 50%。
:root {
font: 5vmin/1 Consolas;
}
main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
figure {
display: block;
width: 15rem;
height: 15rem;
padding: 0;
border: 1rem solid rgba(155, 114, 82, 0.7);
border-radius: 50%;
background: url(https://i.ibb.co/hZj77BZ/lena01.jpg) center center / cover content-box;
}
<main>
<figure></figure>
</main>
英文:
I'm not 100% sure exactly what the criterias are. The key CSS property/value responsible for the circle is: border-radius: 50%.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
font: 5vmin/1 Consolas;
}
main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
figure {
display: block;
width: 15rem;
height: 15rem;
padding: 0;
border: 1rem solid rgba(155, 114, 82, 0.7);
border-radius: 50%;
background: url(https://i.ibb.co/hZj77BZ/lena01.jpg) center center / cover content-box;
}
<!-- language: lang-html -->
<main>
<figure></figure>
</main>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论