2016-05-24 3 views
1

Я использую Zurb Foundation 5.5.3 с ванильным CSS.Почему мое изображение шириной 1000 пикселей в Zurb Foundation 5.5.3 не заполняет полный столбец большого размера?

Мой образ 1000pxx430px не занимая ширину 100% в этом скриншоте: https://www.dropbox.com/s/tkp1w4pz3e4xrgt/Screenshot%202016-05-24%2010.57.33.png?dl=0

Я думал, что она была создана на мой вопрос In Zurb Foundation 5.5.3 to what size(s) do I resize JPEGs such as 5472x3080 to take up the whole 12 columns or less using Interchange?, что для Фонда 5.5.3 с использованием 12-колонка создана ширина равно 1000px, таким образом, чтобы покрыть полные 12 столбцов, которые вы хотели бы увеличить изображение до 1000px в ширину?

+0

Можете ли вы опубликовать скрипку или фрагмент кода здесь на SO? –

ответ

1

ваш класс строк - ширина 1200 пикселей, а ваше изображение - 1000 пикселей. Попробуйте с этим:

<img src="/img/IMG_4039_1000x430.jpg" style="width:100%"> 

и она будет работаю, как вы ожидаете

+0

да спасибо Я только понял, что это вызвано CSS, который имеет http://codepen.io/shoaibik/pen/reXMaG .row { max-width: 1200px; } –

+0

Вы правы. Для того, чтобы нижний колонтитул выглядел хорошо, я скопировал код, который включает CSS, который устанавливает строку в 1200 пикселей на этот код http://codepen.io/anon/pen/jqgjoP. Проблема в том, что если я удалю эту строку, это испортит мой весь нижний колонтитул и с моими ограниченными навыками CSS, которые я не смог исправить ... В кодефене проблема не отображается, а на сайте. Взгляд идет от этого https://www.dropbox.com/s/hveb5wma7c774sr/Screenshot%202016-05-24%2014.39.04.png?dl=0 к этому https://www.dropbox.com/s/ fyhaq3toayz9q27/Снимок экрана% 202016-05-24% 2014.39.59.png? dl = 0 –

+0

или лучше, если я оставлю свою строку как 1200px вместо 1000px ...? Есть ли что-то еще, что я должен изменить в исходном файле Foundation.css, чтобы избежать проблем с использованием строк 1200px? –

1

Также вы можете добавить класс .small-12 к изображению, и он будет принимать 100% доступную ширину.

<img src="/img/IMG_4039_1000x430.jpg" class="small-12"> 
Смежные вопросы