根据屏幕自动调整图像答案

【问题标题】：Adjusting Image automatically as per screen根据屏幕自动调整图像
【发布时间】：2019-08-22 23:01:36
【问题描述】：

图像未根据屏幕进行调整。查看图片 google-play-badge。\

图片的width & height设置为auto，那么它也不会调整大小自动。

我的代码：

body {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  color: white;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

@supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
  p {
    background: linear-gradient(90deg, #000, #000fe6, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3.75s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(45, 45, 45, .05);
  }
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

svg {
  display: flex;
  font: 10.5em 'Montserrat';
  margin: 0 auto;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-width: 5px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

@supports (stroke-dasharray: 6% 29%) {
  .text-copy {
    stroke-dasharray: 6% 29%;
  }
}

.text-copy:nth-child(1) {
  stroke: #4D163D;
  animation-delay: -1;
}

.text-copy:nth-child(2) {
  stroke: #840037;
  animation-delay: -2s;
}

.text-copy:nth-child(3) {
  stroke: #BD0034;
  animation-delay: -3s;
}

.text-copy:nth-child(4) {
  stroke: #BD0034;
  animation-delay: -4s;
}

.text-copy:nth-child(5) {
  stroke: #FDB731;
  animation-delay: -5s;
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@media screen and (max-width: 600px) {
  p,
  h3,
  img {
    font-size: 20px;
  }
}

</style>

<body>
  <div>
    <h3>
      <svg viewBox="0 0 960 300">
	<symbol id="s-text">
		<text text-anchor="middle" x="50%" y="80%">TITLE</text>
	</symbol>

	<g class = "g-ants">
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
	</g>
</svg>
    </h3>
    <p>Some Text Here</p>
    <div><img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" /></div>
  </div>
</body>

图像未根据屏幕进行调整。请参阅 image-alt google-play-badge。

图片的width & height设置为auto，那么它也不会调整大小自动。

【问题讨论】：

标签： html css image image-resizing autoresize

【解决方案1】：

如果您将width: 100% 和max-width: 100% 设置为图像，则会按预期进行大小调整。

body {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

.fullWidthImage {
  max-width: 100%;
  width: 100%;
}

p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  color: white;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

@supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
  p {
    background: linear-gradient(90deg, #000, #000fe6, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3.75s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(45, 45, 45, .05);
  }
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

svg {
  display: flex;
  font: 10.5em 'Montserrat';
  margin: 0 auto;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-width: 5px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

@supports (stroke-dasharray: 6% 29%) {
  .text-copy {
    stroke-dasharray: 6% 29%;
  }
}

.text-copy:nth-child(1) {
  stroke: #4D163D;
  animation-delay: -1;
}

.text-copy:nth-child(2) {
  stroke: #840037;
  animation-delay: -2s;
}

.text-copy:nth-child(3) {
  stroke: #BD0034;
  animation-delay: -3s;
}

.text-copy:nth-child(4) {
  stroke: #BD0034;
  animation-delay: -4s;
}

.text-copy:nth-child(5) {
  stroke: #FDB731;
  animation-delay: -5s;
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@media screen and (max-width: 600px) {
  p,
  h3,
  img {
    font-size: 20px;
  }
}

</style>

<body>
  <div>
    <h3>
      <svg viewBox="0 0 960 300">
        <symbol id="s-text">
          <text text-anchor="middle" x="50%" y="80%">TITLE</text>
        </symbol>

        <g class = "g-ants">
          <use xlink:href="#s-text" class="text-copy"></use>
          <use xlink:href="#s-text" class="text-copy"></use>
          <use xlink:href="#s-text" class="text-copy"></use>
          <use xlink:href="#s-text" class="text-copy"></use>
          <use xlink:href="#s-text" class="text-copy"></use>
        </g>
      </svg>
    </h3>
    <p>Some Text Here</p>
    <div>
      <img class="fullWidthImage" src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" />
    </div>
  </div>
</body>

【讨论】：

你能帮我改变SVG的大小吗，TITLE。
@Pal 这并不容易回答。但是，您需要按比例减少viewBox 中的最后两个数字。例如，要将SVG 扩大25%，您可以使用viewBox="0 0 720 225"。也请查看this 链接。

【解决方案2】：

 <img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" class="width100" />

在上面的代码中添加了类

在样式标签中添加该类

.width100{
max-width:100%;
width:100%;
}

【讨论】：