Question

图像无法根据屏幕进行调整。查看图片 google-play-badge （谷歌播放徽章）。\

图像的宽度和高度被设置为自动，因此它没有调整大小自动。

我的代码：

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>

图像无法根据屏幕进行调整。请参阅图片替代 google-play-徽章。

图像的宽度和高度被设置为自动，因此它没有调整大小自动。

Answer 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>

Answer 2

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

在上面的代码类中添加了

在样式标签中添加该类

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

根据屏幕自动调整图像

2 个答案: