CSS 启用垂直对齐和响应能力

Question

下面的代码默认是横向响应的。但是，它不是垂直响应的。是否有任何 CSS 元素可以用来启用垂直响应？

<html>
<style>
    body {background-color: black; color: white; text-align: center;}
    svg  {width: 100px; height: 100px;}
    img  {width: 300px; height: 300px; border: 1px solid currentColor; border-radius:50%}
</style>

    <body>
        <img class="centered-and-cropped">
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
        <br><br>

        <svg><use href="#Circle"></use></svg>
    </body>

<svg style="display: none;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

屏幕剪辑

我尝试了以下元素。

但是他们没有用。

Answer 1

这样：

<body>
  <div class="outer">
  <div class="svg">
    <img class="centered-and-cropped">
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>

    <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg> <svg><use href="#Circle"></use></svg>
    <br><br>
    <svg><use href="#Circle"></use></svg>
  </div>
</div>
</body>

和css

.outer{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 2

我对你的 HTML 做了一些修改。我会将所有 svg 嵌套在 wrapper 中并弯曲该包装器。然后，您可以将每个 svg in dividually 嵌套在 divs 中。对于这个例子，我称它们为 row-contain 我也弯曲了 div。

垂直响应的问题是你的 img 和 svg 有固定的宽度，所以如果你将它们以你想要的正确宽度和高度加载到你的网站，然后保持不变flex layout 他们应该垂直自动调整大小。例如，您可以使用示例媒体查询。为不同的高度调整元素的大小。您可以在我添加到大圆圈的 CSS 上看到我的示例。请参阅下面的更改。

body {
  height: 100vh;
  background-color: black;
  color: white;
  text-align: center;
}

/* Parent to row-contain, nesting all SVG's */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-contain {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* SVG fixed-height → standard device height */
 svg {
    width: 100px;
    height: 100px;
}
 img.centered-and-cropped {
    width: 300px;
    height: 300px;
    border: 1px solid currentColor;
    border-radius: 50%;

}


/* Media queries for circles */
@media only screen and (max-height: 750px) {
  img.centered-and-cropped { /* big circle resize */
    height: 150px;
    width: 150px;
  }
  
  svg { /* Fill's in for SVG for media */
    outline: solid 1px white;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-left: 10px;
  }
  
  use { /* display: none; on `use` to get rid of main SVG → vertical responsiveness kicks in */
    display: none;
  }
}

/* try removing the last media query and see that when the initial SVG resizes 
it gets clipped. TBH, I don't work with SVG's much but I'm sure there is a way 
around it, but for now this solution shoulld work just fine */

<html>


    <body>
       <img src="https://dummyimage.com/600x400/000/fff" class="centered-and-cropped">
    <div class="wrapper">
        <br><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg> 
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
        <svg><use href="#Circle"></use></svg>
      </div><br>
      <div class="row-contain">
        <svg><use href="#Circle"></use></svg>
      </div>      
    </div>

    </body>

<svg style="display: none; height: auto; width: auto;"><symbol id="Circle"><circle cx="50" cy="50" r="40" stroke="currentColor"/></symbol></svg>

</html>

CSS 启用垂直对齐和响应能力

CSS to enable vertical alignment and responsiveness

css

svg

responsive-design

vertical-alignment

responsiveness