响应灵活列与svg-Java 学习之路

我正在尝试在页面右侧设置一个面板 . 它将在中间有一些内联元素和一个svg图像 .

我希望面板最大宽度为50％，高度为100％ . SVG图像应该增长，同时保留纵横比以填充可用高度 . 因此容器会变得更宽 . 高度填充或容器宽度达到50％时应停止生长 .

这是我提出的：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300" height="214">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>

我在视口大小上添加了一个动画来说明几个问题：

当视口较窄时，面板内容溢出 . 我希望svg能够缩小 .
当面板太高时，svg和按钮之间有空格，我想在按钮下面移动这个空间 .

我用flexbox（ flex-direction: column flex:1 ）做到了，但好像我错过了什么

1 回答

对于 when panel is too high there is space between the svg and the button, I'd like to move this space at the bottom. ：从svg元素中删除高度 .

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button style="flex-shrink: 0;">some button</button>
  </div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  overflow: auto;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
  text-align: center;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>

回复于 2024-05-03T09:32:53+08:00

响应灵活列与svg

1 回答

相关问题