2

Есть один макет:

https://pp.vk.me/c619131/v619131689/16c67/IhRbAtHH_jU.jpg

У меня получилось его сделать так:

https://pp.vk.me/c619131/v619131689/16c60/ZMkYK0T7qi8.jpg

Вот примерный код

В первую очередь меня интересует: как сделать обводку для h2 круглой и чтобы элемент был в центре, а не как на моей картинке?

Потом мне интересно, как пропорционально растянуть картинку на весь div.item-body?

На данный момент я задал высоту и ширину 100%, и результат очень огорчает.

1
  • @S_G, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). P.S.: Вот вам бонус: jsfiddle.net/qyjhdroo/1/embedded/result
    – Zelta
    30 авг 2014 в 18:40

2 ответа 2

2

h2: задайте border-radius, padding.

Картинку сделайте фоном и используйте background-size. Или уберите принудительное задание высоты у картинки и поставьте диву overflow соответственно.

P.S. То, что я вижу в фиддле, меня огорчает.

3
  • >P.S. То, что я вижу в фиддле, меня огорчает. Ну там еще пара бутстраповских класса смягчают обстоятельства, а так и меня это огорчает)
    – S_G
    29 авг 2014 в 16:21
  • @S_G, все просто. Картинка будет лежать как background-image, что бы она подходила и вписывалась в блок - дайте ему background-size: cover||contain. Что бы разместить блок в центре уже созданного-блока картинки дайте ему ширину и высоту. После этого можно использовать трюк: top: 50%; left: 50%; margin-top: -заданная высота/2; margin-left: -заданная ширина/2. Для того что бы сделать цифру читабельней дайте padding, для того что бы верстка не полезла дайте box-sizing: border-box, для того что бы она была круглой дайте картинке border-radius: 50%.
    – Telion
    5 сен 2016 в 22:34
  • @S_G, По сути посмотрите решение мсье FallenMaster и добавьте туда мое описание. Шик!
    – Telion
    5 сен 2016 в 22:35
1

.item-size { 
  height: 25%;
  float: center;
  display:inline-block;
  margin-left: 15px;
  }

.item-body {
  background-image: url('https://xaroktet.files.wordpress.com/2010/05/kvadrat-golova.jpeg');
  background-size: cover;
  width: 150px;
  height: 150px;
  padding: 15px;  
  position:relative;
  display: table-cell;
  vertical-align: middle;
  }
.item-body div{
  background: yellow;
  padding: 10px;
  border-radius: 25px;
  width: 18px;
  margin: 0px auto;
  }
.item-heading{
  padding: 10px;
  text-align: center;
  }
<div class="panel panel-default item-size">
  <div class="item-body">
    <div>13</div>      
  </div>
  <div class="item-heading">Обана!</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.