Question

我正在尝试提出基本的CSS挑战。在这种情况下，我有一个给定圆的图像，但是我不知道该怎么做，以使其保持其长宽比，不能完全覆盖整个圆并居中。这是我的代码，希望您能帮助我并告诉我我做错了。我想学习一种使用任何分辨率的图像实现此效果的方法。

所需效果：

img{
  border-radius:50%;
  width:300px;
  height:300px;
  border: solid 1px black;
}

.image_container{
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="image_container">
    <img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 1

在容器而不是图像上设置尺寸调整条件。

img{
  width: 100%;
  height: auto;
}

.image_container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  border-radius: 50%;
  overflow: hidden;
  padding: 30px;
}

<div class="image_container">
    <img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 2

您正在tr.snip { display: none; } tr.snip ~ tr { display: table-cell; }上使用CSS上的img。然后，您可以将.image-container的{{1}}设置为足够居中而不覆盖圆，如下所示：

width

Answer 3

也许是这样吗？

* {
  box-sizing: border-box;
}

img {
  padding: 30px;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  width: 100%;
}

.image_container {
  border-radius: 50%;
  border: solid 1px black;
  overflow: hidden;
  position: relative;
  width: 300px; height: 300px;
}

<div class="image_container">
    <img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>

Answer 4

概述

将 <img> 标签包装在块级标签中，然后将该标签包装到另一个块级标签中：
```
<section class="frame">
  <figure class="logo">
    <img class="image">
  ... 
```
分配顶级祖先标签（ demo。 section.frame）
```
position: relative;
width: 50vw;
height: 50vw;
```
CSS的基本定位-父级为relative-子级为absolute-子级引用其relative父级区域的X，Y位置。值50vw等于视口宽度的50％。这将使标签具有响应能力，并且只要视口宽度发生变化，它将动态更改其尺寸并保持宽高比。
分配<img>标签的父标签（演示。 figure.logo）
```
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
```
这会将其放置在 section.frame 的边缘。
向 <img> 分配以下内容：
```
display: block;
width: 100%;
height: 100%;
object-fit: contain;
```
这会将 img.image 定位到 figure.logo

添加了:hover效果，以显示img标签如何放置在图形标签和剖面标签中。每个标签都被分配了border-radius: 50%，因此在section.frame上没有可见的角与正方形重叠。

.frame {
  position: relative;
  width: 50vw;
  height: 50vw;
  border: 3px solid #B9BBC0;
  border-radius: 50%;
}

.logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.frame:hover {
  background-color: #000;
}

<section class='frame'>
  <figure class='logo'>
    <img class='image' src='https://danikalaw.com/wp-content/uploads/2017/08/r.png'>
  </figure>
</section>

参考
Viewport CCS Concepts
object-fit: contain属性
position属性

保持圆圈内图像的长宽比

4 个答案:

概述