Как настроить изображение под экран мобильного
Я использую пример карусели отсюда: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp У меня есть несколько примеров изображений из моего приложения, которые я взял со своего мобильного телефона 5,7 дюйма с экраном печати и удалил панель уведомлений вверх (которая показывает сигнал и т. д.). Я пытаюсь сделать эти примеры изображений (карусель) одинаковой высоты и ширины моего экрана, не заставляя пользователя прокручивать вниз или вправо, чтобы увидеть изображение полностью. Таким образом, пользователь увидит панель действий (ту, что есть в приложениях, потому что она будет открываться в веб-просмотре) и только карусель. Я безуспешно пытался изменить ширину и высоту изображений.
Обновлено: Основываясь на ответе Metatron5, я изменил код, и он работает в Firefox для Android, но не распознает vh и vw в веб-просмотре Android.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Carousel</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id = "myCarousel" class = "carousel slide" data-ride = "carousel">
<!-- Indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
<li data-target = "#myCarousel" data-slide-to = "3"></li>
</ol>
<!-- Wrapper for slides -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "begin.png" alt = "" style = "height: 100vh; width: 100vw;">
</div>
<div class = "item">
<img src = "first.png" alt = "" style = "height: 100vh; width: 100vw;">
</div>
<div class = "item">
<img src = "second.png" alt = "" style = "height: 100vh; width: 100vw;">
</div>
<div class = "item">
<img src = "third.png" alt = "" style = "height: 100vh; width: 100vw;">
</div>
</div>
<!-- Left and right controls -->
<a class = "left carousel-control" href = "#myCarousel" data-slide = "prev">
<span class = "glyphicon glyphicon-chevron-left"></span>
<span class = "sr-only">Previous</span>
</a>
<a class = "right carousel-control" href = "#myCarousel" data-slide = "next">
<span class = "glyphicon glyphicon-chevron-right"></span>
<span class = "sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>@Metatron5 извините, обновление! Я пробовал, и, похоже, он работает в Firefox для Android. Я думаю, что это лучший способ, спасибо! :), теперь проблема в том, что он не работает в веб-просмотре Android и имеет пробел справа
хм, кажется, веб-просмотр не поддерживает vh и vw: github.com/facebook/react-native/issues/7103
@ Metatron5, к сожалению, да, я сейчас наткнулся на эту ссылку. :/ Я не уверен, что еще я могу сделать
эта ссылка может помочь? stackoverflow.com/questions/32729416/…
@Metatron5 спасибо за это, я проверил, и у меня есть это право, android:layout_height = "match_parent"
@Metatron5 я пробовал style = "height: 100%; width: 100%, но он по-прежнему показывает небольшой пробел рядом с каруселью, а также имеет прокрутку вниз, чтобы пользователь мог увидеть полное изображение (как и раньше)
Не могли бы вы дать телу ширину 100vw и высоту 100vh. Оставьте картинку с %
@Metatron5 добавил этот .carousel-inner { height: 100vh; ширина: 100vw; } но я не вижу никакой разницы. Версия Android 4.3, поэтому я полагаю, что веб-просмотр не поддерживает vh, к сожалению, vw
установите ширину высоты imageView, соответствующую родительскому элементу, и добавьте этот android:scaleType = "fitXY" в xml imageview
@VipulChauhan это на html
@Metatron5, я не знаю почему, но я верю, даже если я перезагрузил свой телефон. какой-то кеш, возможно, остался в приложении, и он застрял на этой карусели с пробелом. Я очистил данные приложения, а также изменил стиль img на style = "height: 100%; width: 100%, и, похоже, это работает :) спасибо
Хорошо, что наконец-то сработало :D
я вижу тег Android, поэтому я даю вам этот ответ, извините, приятель
Ответы 2
Как и в комментариях, проблема, похоже, заключалась в том, что на телефоне был какой-то кэш, из-за чего стиль не работал. Итак, это, наконец, сработало, но я хочу отметить, что Единицы vh и vw не работают в Androit Webview.
Я также столкнулся с той же проблемой несколько месяцев назад. VH и VW не работали на Google TV. Итак, я решил эту проблему с помощью JavaScript. Попробуйте добавить следующий код в файл сценария:
const sliderImages= document.querySelectorAll('carousel-inner .item');
window.onload = function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
window.onresize= function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
действительно ли нет другого решения, кроме как использовать js для решения проблемы?
Ну, я думаю, что использование JS — это кроссбраузерное решение. Если этот небольшой фрагмент кода создает для вас проблему, вы можете игнорировать JS. Но не знаю, как определить ширину и высоту Wnidow/Browser с помощью CSS, отличного от VH и VW.
У вас есть файл js? Если у вас есть, вставьте код в конец файла или вы можете создать файл js и вставить код и добавить файл js перед закрывающим тегом </body>.
Я сделал новый файл .js. Работает ли он в веб-просмотре Android 4.3? По-прежнему появляется та же проблема. Обновляется ли веб-просмотр, когда я закрываю и снова открываю приложение?
Вы удалили встроенные стили из изображений слайдера? <img src = "begin.png" alt = "" style = "height: 100vh; width: 100vw;"> Удалите эти стили. После этого, если проблема существует, вы можете показать мне свою проблему, используя совместное использование экрана, например, в скайпе или что-то в этом роде.
здесь код, который я использовал. теперь единственная проблема в том, что пользователь должен прокрутить вниз, чтобы увидеть полное изображение paste.ee/p/sbXiQ#UJtp5KiU5T77b3MsT5qJPh4xXLiqyb1D
Вы пытались установить высоту 100vh и ширину 100vw?