2014-01-14 3 views
0

Я занимаюсь разработкой веб-сайта с использованием работы с бутстрапом. но я новичок в этом. поэтому я создаю некоторые погружения, используя классы стиля по умолчанию, и он работает оперативно.Как задать ширину и высоту для divs, img и т. Д. При использовании работы с ботстрапом

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

например:

<div class="col-sm-6 col-md-4"> 
    <div class="thumbnail" style="background-color: #555658; min-height: 350px;"> 
     <div style="font-size:24px; margin-top: 10px; margin-left: 10px; font-weight: normal; font-family: sans-serif; color: #fff;">Connect with Us</div> 
     <div class="caption" style="color:#dddddd;"> 
      <img src="images/w9.png"/> 
     </div> 
    </div> 
</div> 

как установить ширину и высоту в фотошопе? Что я должен использовать% или px?

спасибо.

ответ

1
<img src="images/w9.png" style="width: 400px; height: 200px;" /> 

или

<img src="images/w9.png" style="width: 70%; height: 35%;" /> 

или

<img src="images/w9.png" style="width: 400px; height: 35%;" /> 

или вы можете даже сделать

<img src="images/w9.png" width="400px" height="200px" /> 

или

<img src="images/w9.png" width="90%" height="80%" /> 
+0

но если установить эти значения с помощью точек, когда я просмотра с помощью мобильных устройств и других небольших устройств это показывая абсолютные значения. но по умолчанию эта работа кадра работает гибко, уменьшая размер изображения. Я хочу, чтобы это продолжалось, давая размер ширины, без размеров ширины. Опция float также не работает. – Yasitha

+1

@ Yasitha поэтому используйте% примеров, которые я дал – CRABOLO

+0

Спасибо. Я попытаюсь использовать это. – Yasitha

2

Не используйте встроенный CSS. Это плохая практика.

Чтобы переопределить свойства, скажем, .thumbnail по умолчанию определить класс CSS, как это:

.thumbnail.my-custom-thumbnail { 
    width: 400px; 
    height: 300px; 
    // etc 
} 

.thumbnail.my-custom-thumbnail имеет более высокую специфичность по сравнению с .thumbnail и любые правила, вы определяете внутри него переопределяет правила определяет в .thumbnail ,

Также рассмотрите возможность размещения живых примеров для ваших вопросов CSS/HTML через JSFiddle или аналогичный веб-сайт.

Чтобы узнать больше о специфике CSS, прочитайте here.

+0

Благодарим вас за помощь и показ пути. Еще раз спасибо – Yasitha

+0

Добро пожаловать. – Behrang

1

Попробуйте добавить классы сетки к изображению, если вы хотите, чтобы реагировать, как <img class = "col-sm-6" src="images/w9.png"> или сделать как AlienArrays сказал

+0

Ничего себе, это не лучший ответ на мой вопрос, я многому научился, используя ваш ответ. спасибо. – Yasitha

Смежные вопросы