I have two images that I need to be layered side-by-side.
This is what image 1 looks like now, utilizing the following code:
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./redImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./blueImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
</div>
</section>
I would like to have the images overlay on top of each other like the following:
How would I go about setting that up in CSS? I tried to use this approach but can't get the layer to fit properly. Please help. Thank You!
You should use negative margins to make these thing
I set a class to col-md-3 called overlay and i styled this on style.css
Hope this works
.overlay {
margin-right: -100px;
}
<link rel = "stylesheet" href="style.css">
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3 overlay">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./redImage.png")"
src="https://wallpapercave.com/wp/wp3260204.jpg" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./blueImage.png")"
src="https://cdn.wallpapersafari.com/44/96/ow6U0D.jpeg" />
</div>
</div>
</section>
</section>
Something like adding position: relative; transform: translateX(-50px) translateY(-50px); z-index: -1; as styling to the second image could be a quick fix. (You would probably need to amend the translateX/translateY values to get them where you need them - no other elements on the page will be affected by this transform)
Related
I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.
I've tried using inline-block, inline and float but those don't work.
Here is what I got:
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You need to set the inside divs to inline-block, not the outside one.
<div id="banner">
<div class="inline-block">
<img src ="img1.jpg">
</div>
<div class="inline-block">
<img src ="img2.jpg">
</div>
<div class="inline-block">
<img src ="img3.jpg">
</div>
</div>
I removed all of your inline css because it is just bad practice. You should have a separate css file where you define the styles. I used "inline-block" as a class name here, but name it whatever you want.
In your external css file you would have this, if you kept my naming convention,
.inline-block {
display: inline-block;
}
Also, heres a working fiddle of another rendition, three images side to side.
https://jsfiddle.net/3m33emfd/
banner does NOT need to be set to inline-block, it is an outside container for your child divs. You would actually want #banner to be display: block, so I put that in my working fiddle.
use display:inline-block;
<div id="banner" style="overflow: hidden;justify-content:space-around;">
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img1.jpg">
</div>
<div class="" style="max-width: 100%;max-height: 100%;display: inline-block;">
<img src="img2.jpg">
</div>
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img3.jpg">
</div>
</div>
give the following css
display: flex; justify-content:space-around;
<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You have the images enclosed within div tags, which are block elements.
You should instead apply the style directly to the images, and do away with the divs, like this:
<img style="max-width:20%" src="…">
.image-div{
float:left;
margin-right:10px;
max-width: 20%;
max-height: 20%;
}
<div id="banner" style="overflow: hidden; ">
<div class="image-div" >
<img src ="img1.jpg">
</div>
<div class="image-div" >
<img src ="img2.jpg">
</div>
<div class="image-div" >
<img src ="img3.jpg">
</div>
<div style="clear:left;"></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Studio </title>
<style>
.image {
display: inline-block;
}
</style>
</head>
<body>
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="image" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
</body>
</html>
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
My logo image look like this on mobile:
I want it to be automatically smaller so i added this css:
img {
display: inline-block;
height: auto;
max-width: 100%;
<div class="container">
<div class="row">
<div class="col-lg-12 text-center img-responsive">
<img src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />
</div>
But it does not work, can someone help me ?
If you want your image responsive with bootstrap, you have to apply the class directly in the image
<img class="img-responsive" src="http://placehold.it/600x140" alt="logo" style="margin-bottom: 30px;" />
Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4 hasn't the same height.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/u9av6/3/
Thanks!
try this:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Here's a working version, with jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Maybe your problem is that in your code, the padding is not considering.
Your 400px and 800px is nice, but with padding considering it's not good.
In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...
The padding in each .row is 15px left and right.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
css:
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
fiddle : http://jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...
UPDATE AFTER COMMENT:
*Why 45px ?*
Image 1 is float:left so it has just the padding-right at 15px
Image 2 has padding left and right at 15px {=30px}
So in order do equality (to get same constraints) you need to transmit the total padding to image 2
To make the images displaying side by side, you need to do three things:
1st: make all your images responsive in the html file like this:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
This is for putting two images side by side. You could have as many images as possible.
2nd: Inside your css, give the height to these images like this:
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
My html is
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
if you want constant height, should add these properties:
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.
I'm using the bootstrap framework and trying to get an image centered horizontally without success..
I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
What's the easiest method to get an image centered relative to the page?
Twitter Bootstrap v3.0.3 has a class: center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Just need to add a class .center-block in the img tag, looks like this
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
In Bootstrap already has css style call .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Update 2018
The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
Twitter bootstrap has a class that centers: .pagination-centered
It worked for me to do:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
.pagination-centered {
text-align: center;
}
You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />
Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:
.row .span4 {
text-align: center;
}
Edit
As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3
Works for me. try using center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
I need the same and here I found the solution:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }
I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
Seems we could use a new HTML5 feature if the browser version is not a problem:
in HTML files :
<div class="centerBloc">
I will be in the center
</div>
And in CSS file, we write:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And so the div could be perfectly center in browser.
Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
You should use
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
#media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
#media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
A lot of the above options didn't work for me.
However, this worked!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>
IN Bootstarp 5.0
Use
.mx-auto .d-block
You could change the CSS of the previous solution as below:
.container, .row { text-align: center; }
This should center all the elements in the parent div as well.