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.
Related
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.
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 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.
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'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.