I want to add two images in a single row on my home page made using html css and bootstrap what should be the size of those images(in pixels). Please tell me how can I make those images responsive? Any help will be appreciated. Thanks.
Make 2 dividers in your HTML like:
<div class="row">
<div class="col-md-6 myfirstimageclass"></div>
<div class="col-md-6 mysecondimageclass"></div>
</div>
The class col-md-6 is a Bootstrap class, the other class myfirstimageclass is a self made class, place the images as background in your CSS and you are finished:
.myfirstimageclass{
background-image:url(yourfirstimageurl);
background-size:cover;
height:300px;
}
.mysecondimageclass{
background-image:url(yoursecondimageurl);
background-size:cover;
height:300px;
}
You should choose a reasonable size so they aren't huge is filesize.
Then use bootstrap's img-responsive class to make them response.
Here's a link to the bootstrap documentation for img-responsive.
Related
i'm create a page for web survey using boostrap, because i want my design still same in laptop/computer when access in Tablet or handphone.
But i have found problem, when resize browser
This my web when size browser >= 995px
[![enter image description here][1]][1]
But when resize <= 990px
[![enter image description here][2]][2]
I don't know solution how to fix this problem
This is my code
<div class="container-fluid" >
<div class="row">
<div class="col-md-4 col-sm-4 lk-back">
</div>
</div>
In codepen
Help me thank's
Try img-responsive class in the img tag
<img class="img-responsive" src="path/to/image" />
a is not a block element by default.
a {
display: block;
}
But you should not apply bootstrap classes to your normal elements. Use the bootstrap classes just for the layout to avoid problems like this.
I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.
I'm trying to center a styled responsive image, but it doesn't seem to work. After removing classes one-by-one, I'm finding that my class "portimage" seems to be breaking the responsiveness.
I don't want the images to be larger than 700px and I'd like them to have a light border around them.
Here's the code:
<div class="row mtmini">
<div class="col-lg-12">
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg">
</div>
</div>
Here's the CSS for the class "portimage":
.portimage {
max-width: 700px;
border:1px solid lightgray;
}
Sorry if this is a dumb question--just starting out. I tried searching for this but I'm not finding a solution that addresses styling the image beyond centering and responsiveness. Thanks in advance!
It should be working fine, please double check if you have your CSS link to bootstrap properly inserted. Also, if you're using build tools like gulp/grunt try restarting the watch task.
Also, is 'mtmini' class adding any styles to the 'row' div?
I have an image I want to have a circular effect (the original image is rectangular, and I want it to be round - a typical profile image)
Found many sources for this.
The catch is I want to have it inside a bootstrap column and have the img-responsive effect
I got really messed up trying to achieve it
Bootstrap already has a class for that: img-circle
http://getbootstrap.com/css/#images
Edit: Not valid for non-square images, sorry
Best way is to use a new css class for the image,
for example.
If you are giving css class "img-circle" for the particular image the property should be af following for the css class.
.img-circle{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
Can you use something like this DEMO? I think it can be achived by setting your image as a background-image and defining a border-radius which is equivalent to the diameter of your circle.
You will also have to make use of media queries as is always the case when building a responsive design.
The following is a sample as shown in the fiddle:
CSS
.circle{
height:150px;
width:150px;
background-image:url("http://cdn.playbuzz.com/cdn/3170bee8-985c-47bc-bbb5-2bcb41e85fe9/d8aa4750-deef-44ac-83a1-f2b5e6ee029a.jpg");
background-size:cover;
background-position:center;
border-radius:150px;
margin:0 auto;
}
HTML
<div class="row">
<div class="col-xs-6">
<div class="circle"></div>
</div>
<div class="col-xs-6"></div>
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.