CODEWITHSUNDEEP
htmlcss
user3188513
user3188513

Reputation: 17

Scale image in HTML

I have div in html which should hold 10 equal divs inside of it with some pictures and text. My div height and width is in percentages. I have to put some images in those divs but the problem is I don't know how to calculate which height x width of images I need.

Images should be bingo balls and I have made balls with size 128x128.

This is my Fiddle, div with white border should hold image and image should scale with div.

Div with green border should have 10 divs with blue border. Every div with blue border should have div with white border (image div) and div with red color (some text that should be right of the image).

Everything that I tried was unsuccessful.

Upvotes: 0

Views: 165

Answers (1)

m59
m59

Reputation: 43765

I took your image here: http://tinypic.com/r/103d995/5 and made an example that is stretchy and keeps its proportion.

Live demo (click).

Sample markup:

  <ul>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li>
  </ul>

CSS:

ul {
  list-style: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 15%;
  white-space: nowrap;
}

li {
  float: left;
  clear: both;
  border: 10px solid black;
  margin: 0;
  padding: 0;
  background: lightblue;
  width: 100%;
  min-width: 100px;
}

li img {
  vertical-align: middle;
  height: auto;
  width: 25%;
}

li span {
  width: 75%;
  text-align: center;
  display: inline-block;
}

If you want to also scale the text, check out the new css3 vw unit or for older browsers, use javascript. There's a script called bigText that you might be interested in.

Upvotes: 0

Related Questions