There is one layout:

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

I managed to do it like this:

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

Here is an example code.

First of all, I am interested in: how to make a stroke for h2 round and so that the element is in the center, and not as in my picture?

Then I’m wondering how to proportionally stretch the image to the whole div.item-body ?

At the moment I set the height and width of 100%, and the result is very sad.

  • @S_G, If you are given a comprehensive answer, mark it as correct (click on the check mark next to the selected answer). PS: Here's a bonus for you: jsfiddle.net/qyjhdroo/1/embedded/result - Zelta

2 answers 2

h2: set border-radius, padding.

Make a background image and use background-size. Or remove the forced setting of the height of the image and set diva overflow accordingly.

PS What I see in Fiddle grieves me.

  • > PS What I see in the fiddle makes me sad. Well, there is still a pair of bootstrap class mitigate the circumstances, and it upsets me too ) - S_G
  • @S_G, everything is simple. The picture will lie as background-image , so that it fits and fits into the block - give it background-size: cover||contain . To place a block in the center of an already-created block, give it a width and height. After that you can use the trick: top: 50%; left: 50%; margin-top: -заданная высота/2; margin-left: -заданная ширина/2 top: 50%; left: 50%; margin-top: -заданная высота/2; margin-left: -заданная ширина/2 top: 50%; left: 50%; margin-top: -заданная высота/2; margin-left: -заданная ширина/2 . In order to make the figure more readable, give padding, so that the layout does not go, give box-sizing: border-box , so that it is round, give the picture border-radius: 50% . - Telion
  • @S_G, Essentially look at the solution of Monsieur FallenMaster and add my description there. Chic! - Telion

 .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>