I'm work on bootstrap project and I try to put uploading image to set grid view, but uploading image are not same size 4 images are difference size, I put the image width and height but its not working image are sketching and not display full image any one know how to fix that issue
Thanks
,
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
</div>
Add class img-fluid on image .
Like this
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid">
or
update the following css :
.thumbnail img {
width: 100%;
height: auto;
}
Add Following Css to the code object-fit: cover; May Help You
.thumbnail
{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
.thumbnail img {
width: 164px;
height: 100%;
object-fit: cover;
}
To make images fit in the containing div, add the class img-fluid to them. This wil give them a width: 100%; height: auto;.
This won't give them all the same height, as they have different sizes/aspect ratios.
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
</div>
Related
I created a simple page in my Laravel and in that page, I have three sections which is mainly navigation, content and footer. I got the navigation and footer layout completed. In the content section, I wish to use bootstrap to place my images layout like this:
Image:
This is just a general idea but I need it to be responsive so it fits the mobile layout as well.
What I have tried is to use Masonry for CSS but it does not fit the mobile layout responsively. I tried using bootstrap 4 but the alignment between IMG3 and IMG4/5 are too far apart and placing margin does not align them near enough.
My code:
#section('content')
<div class="container">
<div class="row">
<div class="col-sm">
<img src="{{asset('/images/Home_Bed.jpg')}}" class="img-fluid custom-position-1" alt="">
</div>
<div class="col-sm col-8">
<img src="//via.placeholder.com/350x150" class="img-fluid custom-position-2" alt="">
</div>
<div class="col-sm custom-position-3">
<img src="{{asset('/images/Home_Kitchen.jpg')}}" class="img-fluid custom-position-3" alt="">
</div>
</div>
<div class="row align-items-end">
<div class="col col-8">
<img src="{{asset('/images/Shop_Page.jpg')}}" class=" img-fluid custom-position-4" alt="">
</div>
<div class="col">
<img src="{{asset('/images/Home_Sofa.jpg')}}" class="img-fluid custom-position-5" alt="">
</div>
</div>
</div>
#endsection
.row {
margin-bottom: 30px;
}
.custom-position-1{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-2{
position:relative;
right:100px;
object-fit:cover;
}
.custom-position-3{
position: relative;
bottom: -160px;
left: 50px;
height:100px;
object-fit: cover;
}
.custom-position-4{
position: relative;
height: 400px;
width:800px;
object-fit: cover;
}
.custom-position-5{
position: relative;
height:300px;
left:50px;
top: 100px;
object-fit: cover;
}
Does anyone have any idea how to make it good?
Are you looking for a solution like this?
If you want to have some spacing use margin classes.
img {
width: 100%;
height: 100%;
}
[class*="col-"],
.flex-grow-0 {
border: 1px solid black;
}
.img-fluid {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row m-0">
<div class="col-8 p-0">
<div class="row m-0">
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-6 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
<div class="col-12 p-0">
<img src="http://placehold.it/300x300" class="img-fluid" alt="" />
</div>
</div>
</div>
<div class="col-4 p-0 d-flex">
<div class="d-flex flex-column">
<div class="flex-grow-0 mt-auto">
<img src="http://placehold.it/300x500" class="img-fluid" alt="" />
</div>
<div class="flex-grow-0">
<img src="http://placehold.it/400x400" class="img-fluid" alt="" />
</div>
</div>
</div>
</div>
</div>
i have problem in Bootstrap Thumbnails.
my thumbnails is like that:
img01. but want to be horizontal.
What am i doing ?
My Code:
HTML:
<div class="hrs" align="center">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
</div>
</div>
</div>
</div>
Css:
.hrs{
display: table;
margin: 0 auto;
padding: 20px;
color: white;
It's because you have them in separate <div class="row"> containers. What you should do is put all of your images in the same row container(so take out the second <div class="row">) -and/or- try adding this code to your CSS:
.thumbnail>img { display: inline-block; }
So I'm using the Bootstrap Thumbnail grid system, everything is looking ok apart from the images seem to be overlapping and I can't work out why? I've attached an image too.
When I'm hovering over the images the images in the middle are overlapping each other? I don't know if I'm being completely stupid or it's a bootstrap default I just can't win at?
HTML
<div class="top-header"class="page-header">
<h1>Smile Board</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image01.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image02.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image03.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image04.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image05.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image06.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image07.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image08.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image01.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image02.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image03.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image04.png" alt="">
</a>
</div>
</div>
CSS
body {
font-family: 'Baloo Bhaina', cursive;
}
#media (min-width: 1200px)
.container {
width: 1170px;
}
h1 {
text-align: center;
}
.page-header {
background-color: #EFEC86;
padding-top: 20px;
width: 1130px;
}
.top-header {
width: 1130px;
background-color: #EFEC86;
padding-top: 20px;
width: 1290px;
}
.sub {
background-color: #EFEC86;
padding-top: 20px;
}
img {
width: 100%;
height: auto;
display: block;
overflow: auto;
}
.thumbnail {
width: 300px;
height: 300px;
overflow: auto;
max-width:calc(150% - 10px);
margin:0 16px;
}
.thumbnail:hover {
background-color: #EFEC86;
}
.row {
margin-right: 50px;
margin-left: -15px;
}
Why not adding margin when you are hovering each item. Just add margin on the .thumbnail class when it is hovered so that it will not destroy your other item
Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column?
This is my code:
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
And CSS:
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
Add the text-center class to your column divs
<div class="col-md-4 col-sm-4 col-xs-4 text-center">
First of all you can not write 2 class tag on same element
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
instead of this you can write class="img-circle img-responsive"
for center aligning u can use "text-center" class to parent div..
or you can also apply style="float:none; margin:0 auto;" to img.
thanks, hope this will help you.
The idea is to make image block element and margin of auto. but as the margin:auto won't work except you assign some width of the elemet.
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
it would work defiantly.
I want to center my images inside the Bootstrap grid like this - http://i.imgur.com/weTvp5Q.jpg; the image should be centered in the blue box (both on desktop and mobile).
here's my html:
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
</div>
Just use the Bootstrap 3 center-block class in your images...
Demo: http://bootply.com/104077
I also simplfied your markup to remove unnecessary nesting..
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
should be just a matter of css
.image a {
display: block;
}
.image a img {
margin 0 auto;
display: block;
}
Try this.
img {
margin:0 auto;
width:50%
}
This will do the trick ;)
.image.img-responsive {
text-align: center;
}
Try to add in your css:
div.image {
text-align: center;
}