Блог

Главная - Вопросы по программированию - Автоматическая настройка изображения в соответствии с экраном

Автоматическая настройка изображения в соответствии с экраном

#html #css #image #image-resizing #autoresize

#HTML #css #изображение #изменение размера изображения #авторазмеризация

Вопрос:

Изображение не настраивается в соответствии с экраном. Смотрите изображение на значке Google-play.

Для ширины и высоты изображения установлено значение 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>

Изображение не настраивается в соответствии с экраном. Смотрите изображение-alt значок Google-play.

Для ширины и высоты изображения установлено значение auto, тогда его размер также не изменяется автоматически.

Ответ №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>

Комментарии:

1. Не могли бы вы также, пожалуйста, помочь мне с изменением размера SVG , ЗАГОЛОВКА .

2. @Pal Ответить на это не так просто. Тем не менее, вы захотите уменьшить два последних числа viewBox пропорционально. Например, чтобы увеличить изображение на SVG 25%, вы бы использовали viewBox="0 0 720 225" . Взгляните также на эту ссылку.

Ответ №2:

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

В приведенном выше коде добавлен класс

добавьте этот класс в тег style 

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