I'm creating a responsive design for my movie portal using Bootstrap 2.
I want to make the image height on a level with the other pictures. When i manually set picture height then it looks beautiful and all pictures are on the level with the other pictures.
But when I open website on tablet, then all the pictures look compressed!
Example 1:
If I remove height from pictures, then pictures are not on the same level with the other and looks bad.
Example 2:
Maybe you have idea how to fix it?
HTML:
<div class="span2 item all">
<div class="picframe img-polaroid">
<span class="overlay">
<span class="info-area">
<a class="img-icon-url" href="/movie"></a>
</span>
<span class="pf_text">
<span class="project-name">Movie Name</span>
<span>Genre</span>
</span>
</span>
<img data-original="pictur.jpg" src="picture.jpg" alt="" class="poster"/>
</div>
</div>
CSS:
.poster {
width:170px;
height:226px;
}
You might use Bootstrap 3 because it's very easy to make responsive image:
Responsive images
<img src="..." class="img-responsive" alt="Responsive image">
Related
I am building a website to display images in an specific grid. I am using Laravel and Bootstrap for this project.
The goal is to create a grid with spacing that maintains the images heights. To create a space between the divs I added a border right to the images, but when I do that it also creates a border bottom at the first two divs, which makes the first two images have a smaller height than the last one.:
Image: https://gyazo.com/9bd97d19073a123966a652e3603ebfd4
[![As you can see the first two rectangles have a border bottom instead of just the border-right]
For reference this is the kind of grid that I am trying to create:
https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
https://www.zarahome.com/pt/%C3%BAltima-semana/cole%C3%A7%C3%A3o-c1020095502.html
This is the code I have so far:
<div class="row g-0 mx-0">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid style="border-right: 10px solid white;">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
</div>
I simply dont understand why adding a border-right also adds a border-bottom. I tried adding a margin instead but this causes the bigger image to jump out of the row, like so:https://gyazo.com/5a785de16398756021dd843ba038cbc6
Could someone help me to achieve this result?
https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
I am assuming you are using Bootstrap 4 to create this since in your tags it shows bootstrap-4. The reason why your code would not work is that g-0 comes from Bootstrap 5. It might have been that you looked at the Bootstrap v5 documentation.
If you are using bootstrap 4 then you can add no-gutters to the div containing row.
To keep the images the same height I'd add some custom css and add the 40vh in there.
I have made an example for you to take a look at:
https://www.codeply.com/p/BqPXPxcP2j
A coleague helped me achieve the best solution, so I will post what sworked in case someone faces the same issue:
<div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 100px">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid">
</div>
</div>
I am trying to put 3 images into 3 boxes.Here I have used bootstrap v3.1.1, here the problem is image is not centering correctly.My medium device output like bellow image
Here no any problem for medium device but the problem is in small device this is looking like bellow image
Here image is not cantering.
I have add bellow html code and a css code
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!--------------------------->
<div class="main-box">
<div class="box" >
<div class="box1 box sides-hz-2">
<img src="images/sss.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Select</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1" style="background:#8C7E63;">
<li class="header1"><Strong>Online</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Import</Strong>
</li>
</div>
</div>
</div>
<!--------------------------->
</div>
</div> <!--end of grid -->
</div> <!----end of row ------->
</div> <!----end of continer ------->
Here my own css for image
div.box1 img
{
display:block;
margin-left:25%;
}
May anybody help me for fix this problem ?
You must make the image responsive by adding these properties to img class
.responsive-image{
height:auto;
width:100%;
}
Auto height makes sure of resizing image without losing the aspect ratio
If you are using bootstrap, it has class img-responsive which will take care of responsiveness of the image.
Tip : On resize the image tend to resize and shrink. To make it look nice you can add class center-block to keep the image in center of outer div :-)
Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
</div>
The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.
I'm also new to bootstrap. I must have been messing with this longer than I should have but basically here is what I found works
You want to have a custom stylesheet that you load after bootstrap's css so you can make custom adjustments without destroying the original css. You can then make the adjustments:
.thumbnail-image {
overflow: hidden;
height: 150px;
}
.thumbnail-image > img {
width: 100%;
}
So then I sandwiched the image inbetween a div with the "thumbnail-image" class in the HTML.
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
</div>
As column sizes adjust at the breakpoints you would have to do some similar adjustments regarding the custom height property of the custom .thumbnail-image class but other than that this is what I came up with!
Try adding height and width attributes within the image tag like so:
<img src="..." height="150" width="150">
Not sure how this'll interact with bootstrap's responsive image class. Best practice would be to actually insert an image which has the correct dimensions.
I'm trying a web shop layout consisting in three columns:
| thumb | main image | description |
the thumbs column, contains three images that should be resized exactly to match the main image height. I'm using the img-responsive class but there are some minimal pixel differences when I display this layout on different sizes.
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-xs-3" id="prodThumbs">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
</div>
<div class="col-xs-9">
<img src="http://placehold.it/534x800" class="img-responsive">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<h3>Price: 40,- €</h3>
<button type="button" class="btn-default">add to cart</button>
</div>
</div>
</div>
here is example http://jsfiddle.net/F6vtb/embedded/result/
Is there a better way to achieve this in bootstrap, so the images are perfectly aligned?
thanks
I think your best bet would just be to use a table instead of trying to use grid-columns. Grid-columns can be a pain to keep the same height.
DEMO
I am trying to create a css ribbon on this panel of picture. But the ribbon keeps on appearing on the upper right side of the screen.
Here is my HTML Code
<li class="span4">
<div class="thumbnail">
</div>
<img src="img/placeholder-360x200.jpg" alt="product name">
<div class="caption">
<h3>Product name</h3>
<p>
Few attractive words about your product.Few attractive words about your product.
Few attractive words about your product.Few attractive words about your product.
</p>
</div>
<div class="widget-footer">
<p>
Buy now
Read more
</p>
</div>
</div>
The CSS code can be found here.
And a screenshot of what I'm trying to build
try this
http://jsfiddle.net/UBfCE/68/
.ribbon-wrapper{
margin:0 0 0 212px;
position:absolute;
}