Geek Answers Handbook

Resize image using twitter-bootstrap

I am trying to create a twitter structure for my own site, and I want my image to vary depending on the size of the browser. I got confused and tried everything, but could not come up with a solution, here is my structure.

HTML

<section id="intro"> <div class="row" id="ruby"> <div class="span6" id="heading"> <h1>Journey Into Ruby and Beyond</h1> <p>A blog about my journey into ruby, my experiences and lots of fun!</p> </div> <div class="span6" id="pic" align="right"> <p>Akash Soti<br>RoR Developer<br>@xyz company </p> </div> </section><!--/intro-->

CSS

 #ruby.row{ margin-left: 0px; padding-right: 0px; padding-bottom: 0px; } #pic{ background: url(img/Akash.png); background-repeat: no-repeat; height: 150px; width: 200px; margin-left: 200px; } #pic img{ max-width:100% ; max-height:100% ; display:block; } #pic p{ position: relative; right: 110px; margin-top: 90px; margin-left: 0px; text-align: left; }
+4
source share
2 answers

Twitter bootstrap is designed to make images (and layouts) responsive, i.e. images in your content:

<img src="path/to/images.jpg" alt="some">

Not the images you used as background images in CSS.

+9
source

You have to use

 @media (max-width: 699px) { #pic{ background: url(img/Akash.png); background-repeat: no-repeat; height: 100px; width: 150px; margin-left: 200px; } }

But if you need a responsive design, try to avoid pixels, use%. And if your background means an image (e.g. photo, pic), but not a background image, use <img> instead

+1
source

More articles:


All Articles