Я пытаюсь отобразить изображение только для мобильных устройств, но когда я изменяю размер браузера или выбираю другое мобильное устройство, мое изображение изменяется, а это не то, что мне нужно. Я использую vh unit, поэтому мое изображение выглядит одинаково на всех ширинах. Вот фрагмент:
#main-pic {
border: 2px solid red;
background-image: url(https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
height: 55vh;
min-width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main-pic"></div>
</body>
</html>
В моем реальном проекте эта фотография находится в сетке Bootstrap, и я использую запросы @media, чтобы указать ширину устройств.
РЕДАКТИРОВАТЬ: Чтобы уточнить, я хочу отобразить полное изображение независимо от того, какой у него размер экрана
РЕДАКТИРОВАТЬ 2: Хорошо, поэтому давайте предположим, что я пытаюсь отобразить полное изображение, сохраняя его соотношение - для каждого мобильное устройство - в сетке (col-sm-10, взяв его на полную ширину), что бы посоветовать, чтобы оно выглядело хорошо?