Bootstrap отзывчивые изображения идеальная ширина

Question

Вопрос у меня довольно простой.

У меня есть div с отзывчивыми изображениями. на см дивы имеют полную ширину, как:

<div class="row"> 

    <div class="col-md-4"> 
     <img src="/img/picture1.jpg" class="img-responsive"> 
    </div> 

    <div class="col-md-4"> 
     <img src="/img/picture2.jpg" class="img-responsive"> 
    </div> 

    <div class="col-md-4"> 
     <img src="/img/picture3.jpg" class="img-responsive"> 
    </div> 

</div> 

Bootply

Что ширина в рх я должен использовать для фотографий, я хочу самого высокого качества для изображения тот возможно.

Im не отменяют любой начальной загрузки CSS поэтому его по умолчанию бутстрапе 3.

Также я знаю, тем больше разрешение изображения, тем лучше качество, но 4k изображение будет бесполезен на сНу см в начальной загрузки и является отходы ресурсов.

Answer 1

Предполагая, что вы используете фиксированные контейнеры и незаваленный bootstrap CSS, ширина контейнера для небольших устройств равна 750px (720px + grid-gutter-width). Это означает, что максимально возможный столбец/изображение может быть 720px (ширина контейнера - желоба). Поэтому, если вы хотите, чтобы изображения отображались в лучшем качестве, они должны иметь ширину не менее 720 пикселей и 1440 пикселей для покрытия экранов сетчатки.

Answer 2

Максимальная ширина браузера невелика, поэтому короткий ответ «настолько большой, насколько вы можете» (но учтите, что чем больше изображение, тем дольше требуется загрузка).

Что бы я хотел сделать так, как в Bootstrap. Размеры бутстрапа идут от экстра-малого к большому, и он считает, что большие контейнеры (если не жидкость) имеют ширину 1170 пикселей, поэтому она должна быть не менее трети этого, 390 пикселей (330 пикселей, если мы удалим пространство желоба).

Кроме того, он отображается на полной ширине на маленьких экранах, которые, как считают, имеют 750px (720px, если мы удалим пространство желоба), поэтому минимальные обновления до 720px.

Но, если вы хотите, чтобы ваша сеть выглядела великолепно на устройствах сетчатки или аналогичных, вы должны использовать изображения в два раза большие, поэтому результат будет 1440px (но вы должны использовать эти большие только на устройствах такого типа)

Я хотел бы найти компромиссное решение между размером и весом.

Answer 3

Класс col-md-4 заставляет загрузочный лоток разбивать три горизонтальных изображения на три столбца, когда ширина браузера составляет 768 пикселей или меньше. Ширина желоба составляет 15 пикселей, поэтому максимальная ширина изображения составляет 738 пикселей. Это будет работать для ширины экрана до 3 * 768 = 2304 пикселей. Большинство экранов будет подпадать под этим (см ниже)

https://www.w3schools.com/browsers/browsers_display.asp

Для большей ширины вы должны проверить в зависимости от ваших требований ...