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

Question

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

Рассмотрим следующий шаблон:

http://startbootstrap.com/templates/blog-post/

900x300 заполнитель изображения явно не 900 в ширину на рабочем столе монитора 1080р. Он отображается только в полном размере, когда браузер имеет ширину около 1000 пикселей.

Q) Я здесь плотный? Как определяются или определяются эти ширины?

Это важно, поскольку я хочу сделать некоторые проекты, используя бутстрап, но, очевидно, я хочу, чтобы я выбрал подходящую ширину изображения.

Answer 1

Многие способы сделать это, но проще всего использовать Chrome Inspect Element.

1) Щелкните правой кнопкой мыши по фотографии и выберите «проверить элемент». Прокрутите вниз, пока не увидите диаграмму это размеры, обивка и т.д.

2) Отрегулируйте ширину браузера на максимум ширины фотографии (в вашем примере это между 990px ​​и 1200px)

2) Продолжайте редактирование placehold.it изображение -width до тех пор, пока контрольная диаграмма не перестанет менять ширину фотографии (см. прилагаемую фотографию). Это говорит о максимальном пороге, в данном случае 940px.

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