I'm struggling trying to make a responsive grid of 2x2 images in bootstrap.
I'd want the images to fill either the height or width of the browser. This is where i am stuck in bootstrap.
Code:
<div class="container">
<div class="row">
<div class="col"><img id="Image1" class="img-fluid" src="9e6845.jpg"></div>
<div class="col"><img id="Image2" class="img-fluid" src="6845.jpg"></div>
<div class="w-100"></div>
<div class="col"><img id="Image3" class="img-fluid" src="98d6e6845.jpg"></div>
<div class="col"><img id="Image4" class="img-fluid" src="9e6845.jpg"></div>
</div>
</div>
Issue:
Container is set to max-width:1140px, so on taller screens i end up with empty space at bottom.
If i set container max-width:100%, the width of the image pushes them out of the viewable area of the browser.
Am i better off using jQuery or similar getting the total height\width, then dividing it in 2 and setting the image sizes from that, or is there a way to do this with bootstrap/CSS/HTML.
Standard bootstrap container does not fill the width
100% width pushes outside browser viewable area.
Please provide the resolution of your images. Kindly use proper ratio images. Do crop them accordingly.
You can read out about aspect ratios on many sites. Here is the link where you can get the
overview information.
Aspect ratios
Please also share clear pictures.
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.
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 building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.
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.
I am using Bootstrap. In the following markup, when the browser window width is reduced to minimum, image spills over and not totally 100% visible.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<h1 style="display:inline;">Some heading here</h1>
<img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
</div>
</div>
How can I fit it?
You should use bootstrap's img-responsive class with a max-height rather than a fixed height to make the image scale nicely on small screens.
Bootstrap also has a convenience class pull-right which you can use instead of apply the float style inline.
<div class="row">
<div class="col-xs-12">
<h1 style="display:inline;">Some heading here</h1>
<img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
</div>
</div>
Here's a bootply example: http://www.bootply.com/x9KQXFqkGr
You should use min-width and max-width or make "height:38px" to height 100%. Using % values is more responsive than specifying pixels.
Use class="img-fluid" this works in Bootstrap 4. It sets max width to 100%. The height of image is set to auto.