响应式设计的问题：将图像放置在圆圈内时出现溢出问题

Question

我目前正在研究响应式设计，当尝试将图像放置在圆圈内而不溢出时，我遇到了一个问题。我有一个圆形容器，我希望图像适合圆圈内而不会溢出，尤其是当屏幕尺寸发生变化时。

#inner {
  position: absolute;
  left: 10vw;
  max-width: 30%;
}

.circled {
  width: 30vw;
  height: 30vw;
}

.container {
  width: 80vw;
}

#outer {
  position: relative;
  left: -10vw;
  bottom: 20vh;
  width: 400px;
  height: 400px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="container">
    <div class="circled"><img id="inner" src="https://i.postimg.cc/yNNG527Q/pfp.png"><img id="outer" src="https://i.postimg.cc/K8bS99Kw/circle.gif"></div>
  </div>

</body>

</html>

我尝试使用 max-width: 100% 和 max-height: 100% 等 CSS 属性来确保图像不会超过圆圈的尺寸，但它似乎没有按预期工作。画面依然充满悲伤。我想实现响应式设计而不过度依赖媒体查询。

Answer 1

我相信这就是你要问的。如果您希望每次都将两张图像完美地堆叠在一起，一种方法就是这样。

将一个叠在另一个上面（就像你一样），一个是
```
position: relative;
```
，另一个是
```
position: absolute;
```
将它们放入容器中以将它们分组。如果您想以不同的屏幕宽度移动它们，请移动此父容器。移动一个父元素比移动两个单独的项目要快。设置父母
```
position
```
，这里设置为
```
position: relative
```
。这为两个图像提供了一个共享的共同起点。

.container {
  width: 80vw;
  position: relative;
}

.circled {
  width: 30vw;
  height: 30vw;
  position: relative;
}

#inner {
  position: relative;
  width: 100%;
  height: auto;
}

#outer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="container">
    <div class="circled">
      <img id="inner" src="https://i.postimg.cc/yNNG527Q/pfp.png">
      <img id="outer" src="https://i.postimg.cc/K8bS99Kw/circle.gif">
    </div>
  </div>

</body>

</html>

响应式设计的问题：将图像放置在圆圈内时出现溢出问题

问题描述投票：0回答：1

1个回答

最新问题

响应式设计的问题：将图像放置在圆圈内时出现溢出问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1