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.
Related
I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.
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 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>
If someone could take a quick look at this code and give advice, that would be much appreciated.
I have some images that resize correctly on both iPad and PC screens. However, as soon as you try it on a phone/reduce browser window size, the image does not resize correctly.
CSS:
.col-md-2 {
width: 16.66666667%;
}
HTML:
<div class="col-md-2 col-sm-4">
<div class="timeline-thumb">
<div class="thumb">
<img src="images/timeline6.jpg" alt="">
</div>
<div class="overlay">
<div class="timeline-caption">
<h4>Wrapping Services</h4>
<p>Click for more info</p>
</div>
</div>
</div>
</div>
The image is 170px wide, and there are 6 of them in a line, that all highlight in grey (via CSS) when you roll the mouse over them.
When i resize my browser to that of a phone, they get bigger than before!
Any advice much appreciated.
If someone is knowledgeable on the subject and can help please contact me and ill try to provide any info you need.
Thanks.
I'm trying to understand if you are using Bootstrap. If so, you should add a class for the small devices, try to add a col-xs-4 or col-xs-6 to the DIV element that is "col-md-2 col-sm-4" now.
Looks like Bootstrap. If so, add the img-responsive helper class to your image.
<img class="img-responsive" src="images/timeline6.jpg" alt="">
This will allow your image to scale proportionately and fill 100% width of the containing div regardless of viewport size.
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.