I am building a template with bootstrap 2.3.2 and I want to have images that have certain dimensions according to the grid. (I'm not using the fluid grid, however I am using the responsive features).
I expect that the image which is contained e.g. in a span4 div would shrink accordingly even if it has a larger resolution, but instead it is shown at its real pixel size. Is there a way to shrink the image according to the div size? Or do I have to apply an explicit width in the css?
I know that in plain CSS I could achieve what I want in this way: How do I auto-resize an image to fit a div container but I was wondering if in Bootstrap there is a dedicated class for this.
Here's my code:
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4">
<img class="img-polaroid" src="public/images/h1.jpg" alt="" />
</div>
<div class="span8">
<img class="img-polaroid" src="public/images/h2.jpg" />
</div>
</div>
</div>
</div>
</div>
If you are set using Bootstrap 2, then your best bet is just to do what the question you referenced says, and add a specific rule in your CSS, as the 2.x branch does not have anything specific for responsive images.
Another option to consider would be to move to Bootstrap 3, which does have a responsive image helper. It is as simple as adding .img-responsive to any image. See the 3.x docs for more details at: http://getbootstrap.com/css/#overview-responsive-images.
Related
I am new to Bootstrap, recently working on an Angular2 project, having a question to ask.
Currently I have a map-component left-hand side occupying 3 columns, however every time when I resize/shrink the browser, the image resizes/shrinks too. But I want the image to remain the fixed size whenever user resize the browser. So I delete the class="img-responsive" in the img tag. But those two components ended up overlapping when I shrink the browser. I am wondering why and could anyone please help me out.
For base app-component:
<div class="row ">
<div class="col-md-3">
<legend-component class="legend-component"></legend-component>
<map-component></map-component>
</div>
<div class="col-md-9">
<sidebar-component></sidebar-component>
<table-component></table-component>
</div>
</div>
For the map-component, I have the corresponding map-template to render my image:
<div align="center" >
<div class="row" id="images">
<div class="col-sm-12">
<img class="img-responsive" [src]=getImageSource() height="90%"/>
</div>
</div>
</div>
For normal full-screen sized browser:
Shrink the browser before disabling class="img-responsive":
Shrink the browser after disabling class="img-responsive":
If you want the image to stay to a certain size, I'd suggest defining a fixed width/height for the image. img-responsive resizes the image to the size of it's container's width.
Give the image a max width. The img-responsive mainly changes the picture's width.
I have try to put image in the right side and text in the left side,
but for some reason its the opposite and I don't know why,
By the way how can I shrink it to fit the "Can you see the simplicity behind the logo?" size.
Link to website
The column you want on the left should come first. So in this case the text.
Example
<div class="row">
<div class="col-xs-6">
[text]
</div>
<div class="col-xs-6">
[image]
</div>
</div>
You have the img-responsive class on the logo so it will scale depending on the viewport size. You also have a inline style with "height: 200px". Lowering this number would decrease the size of the logo.
The styles coming from bootstrap are setting your layout. For instance your image <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right"> has a float:left coming from bootstrap. You can override bootstrap styles by putting your styles inline like this <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right" style="float: right;"> or by placing !important; after the styles you want to override other styles. Use the developer tool on the browser to analyze the css and you'll see what is affecting your page and what is not.
I have large image similar to this. I need to put there images in bootstrap and align these to get layout similar to this. such that there tiles are arranged in a grid of 3 * 3. I was able to get these alignment with defult bootstrap classes like pull-right setting min width. but it does not show properly scale up in retina display and high resolution monitor how do I proceed using bootstrap 3. thanks in advance
Remove pull-right, min-width and put the image inside a bootstrap div with img-responsive class.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-sm-8">
//your text
</div>
</div>
</div>
Here is where my code is now:
link
Here is the design I am trying to achieve:
Picture of design
I've tried position relative and margins however the methods I've used ended up compromising the responsiveness of my page. What is the best way to position these elements in the above design while still keeping the webpage able to adapt to a change in screen size?
You can use bootstrap for getting responsive designs. When you use bootstrap you can use the grid system to manage your elements. class "row" will get you a grid divided into 12 equal columns. You can then use col-md-x/col-sm-x depending on you design to position your elements. You can refer to http://getbootstrap.com/css/ to learn further. In other word use col-md-3 to display image and col-md-9 for information. It will work.
Example just for reference:
<div class="row">
<div class="col-md-3">
<img /> <-- put your image here -->
</div>
<div class="col-md-9">
<-- put your texthere -->
</div>
</div>
<div class="row">
<div class="col-md-9">
<-- put your texthere -->
</div>
<div class="col-md-3">
<img /> <-- put your image here -->
</div>
</div>
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.