Как минимизировать изображение для установки на мобильный

Question

Я использую ниже URL, чтобы установить фоновое изображение:

https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png

body { background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png"); 
background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3A3F50;
}

С этим я могу правильно установить фон в браузере, но на том же экране, если я вижу в мобильном телефоне, я не могу увидеть полное изображение, так как это не так настройка или рендеринг в зависимости от размера экрана.

Есть ли способ отобразить одно и то же изображение в браузере и на мобильном устройстве или я могу уменьшить указанное выше изображение до определенного размера и отобразить на мобильном телефоне?

Answer 1

Если процент (%) не работает, вы можете использовать vh (просмотреть высоту порта) и vw (просмотреть ширину порта), чтобы установить размер фона

body {
 background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
 background-size: 100vw 100vh;
}

Вы можете просмотреть Здесь

Answer 2

Если вы хотите, чтобы изображение масштабировалось как вверх, так и вниз на экранах мобильных устройств, установите для свойства css width значение 100% и height для auto:

.image_class {
  width: 100%;
  height: auto;
}

Если вы хотите изображение чтобы уменьшить масштаб, если это необходимо, но никогда не увеличивать масштаб до размера, превышающего его исходный размер, используйте max-width: 100%:

.image_name {
  max-width: 100%;
  height: auto;
}

Если вы хотите ограничить адаптивное изображение максимальным размером, используйте параметр max свойство -width, с выбранным значением пикселя:

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

в вашем случае ваше изображение, кажется, находится внутри тега body, в первом случае

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

это будет растяните изображение по всей странице, но с вашим изображением https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png кажется, что размеры меньше, следовательно, изображение может стать размытым, но, тем не менее, на мобильном устройстве оно изменится в соответствии с окном просмотра во втором сценарии , у вас может быть что-то вроде этого

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  width: 100%;
  height: auto;
}

изображение займет 100% ширины как на больших, так и на маленьких экранах, что означает, что на мобильном устройстве размер изображения будет уменьшен до 100% контейнера

также вы можете использовать viewport высоту и ширину, это будет гарантировать, что изображение охватывает всю страницу в зависимости от значения вашей ширины и высоты, вы также можете проверить мобильные видовые окна , чтобы увидеть, как вы можете установить размеры для мобильных экранов

надеюсь, это поможет