Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Бэкграунд дива по величине дива с соблюдением пропорций бэкграунда
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Бэкграунд дива по величине дива с соблюдением пропорций бэкграунда

Страниц (1): [1]
 

1. Webtest - 23 Июля, 2014 - 11:12:36 - перейти к сообщению
Здравствуйте.

Подскажите пожалуйста, можно ли сделать так, есть див:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div class="divImage" style="background-image: url(Images/<?php echo $value; ?>)"><input type="checkbox" class="checkboxtest" id="<?php echo $key . $value; ?>"></div>

И цсс код к нему:
CODE (htmlphp):
скопировать код в буфер обмена
  1. .divImage {
  2.         border: 1px solid black;
  3.         display: inline-block;
  4.         margin-left: 5px;
  5.         background-repeat: no-repeat;
  6.         background-size: 100%;
  7.         width: 150px;
  8.         height: 150px;
  9. }

Так вот, в случае если бэкграунд не квадратный, то картинка получается уезжает за див, и часть бэкграунда не видно.
А можно сделать как-нибудь, чтобы если картинка была прямоугольная, то она вся вмещалась в див, а место, которое оставалось в диве было черным?
Могу картинку залить, как есть сейчас, чтобы было наглядно.
2. IllusionMH - 23 Июля, 2014 - 11:26:22 - перейти к сообщению
Webtest, посмотрите в сторону background-size: contain
3. Webtest - 23 Июля, 2014 - 11:34:42 - перейти к сообщению
IllusionMH, спасибо, вот так заработало:
background-size: contain;
background-position: center center;
Кстати, подскажи пожалуйста, можно ли как-нибудь сделать кнопку, которая бы отметила ВСЕ чекбоксы в данной форме при нажатии на эту кнопку?
Вот код:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <form action="Main.php" mathod="post">
  2. <?php foreach ($scanImages as $key => $value) : if ($value != '.' && $value != '..') : ?>
  3. <label>
  4. <div class="divImage" style="background-image: url(Images/<?php echo $value; ?>)">
  5. <input type="checkbox" class="checkboxTest" id="<?php echo $key . $value; ?>">
  6. </div>
  7. </label>
  8. <?php endif; endforeach; ?>
  9. <input type="submit" id="waterButton" value="Поставить вотермарку на отмеченных картинках.">
  10. </form>
4. IllusionMH - 23 Июля, 2014 - 11:38:55 - перейти к сообщению
Webtest, отслеживать событие изменения флажка и в цикле менять состояние остальных на соответствующее этому.
5. Webtest - 23 Июля, 2014 - 11:43:58 - перейти к сообщению
IllusionMH, и еще вопрос!
Как сделать так, чтобы кнопка:
<input type="submit" id="waterButton" value="Поставить вотермарку на отмеченных картинках.">
Была перенесена ПОД картинки, а не в ряд с ними?
Я сейчас пробую колдовать с флоатами и клирами, но не очень получается.
(Добавление)
А все сделал так:
<div id="waterButtonDiv">
<input type="submit" id="waterButton" value="Поставить вотермарку на отмеченных картинках.">
</div>

 

Powered by ExBB FM 1.0 RC1