I'm trying to have a column of images of different sizes appear with equal height. I've read about object-fit. I can't seem to make it work though.
jsfiddle
Here's my current code:
<div class="row">
<div class="col-4 p-0">
<img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" class="img-fluid" data-wow-delay="0s" style="object-fit: cover !important; min-height: 100%">
</div>
<div class="col-4 p-0">
<img src="https://www.w3schools.com/css/paris.jpg" alt="" class="img-fluid" data-wow-delay="0.2s" style="object-fit: cover !important; min-height: 100%">
</div>
</div>
When I remove object-fit, there's no difference.
Thanks in advance.
I have debugged your code. This will make sure the images doesn't get huge on browser resizing and images will be responsive as well.
<div class="col-4 p-0">
<a href="#" target="_blank" style="display: block; height: 100%; width: 100%;">
<img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" style="display:
block;
height: 100%; width: 100%;">
</a>
</div>
This gives you a desired result since object-fit for some reason is not working (could be due to the aspect-ratio difference between the images.)
<div class="row d-flex">
<div class="col-4 p-0">
<a href="#" target="_blank" style="display: block; height: 100%; width: 100%;">
<img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" style="display: block; height: 100%; width: 100%;">
</a>
</div>
<div class="col-4 p-0"><img src="https://www.w3schools.com/css/paris.jpg" alt="" style="display: block; height: 100%; width: 100%;"></div>
Position absolute for the parent container of the image made the magic
<div class="col-4 p-0">
<a href="#" target="_blank" style="display: block; height: 100%; width: 100%;position: absolute;">
<img src="https://www.w3schools.com/css/rock600x400.jpg" alt="" style="display:
block;
height: 100%; width: 100%;">
</a>
</div>
Related
I am creating this layout
My code :
<div class="tour-grid">
<div class="tgItem tg-left">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
</div>
Check my fiddle
But grid are not equal and image doesn't fit inside div.
Right div height should adjust to left col
what is rules with grid system ? should i wrap 3 div into one. ?
You can simplify your code like below
.grid {
display: grid;
grid-auto-flow: column;
grid-gap: 10px;
max-width: 600px;
margin: 20px auto;
}
.grid img:first-child {
grid-area: span 3/span 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://picsum.photos/id/1074/600/400">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
</div>
I have an article explaining this code and more: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#image-grid
I'm desperate trying to make this work, but I'm not sure what I'm doing anymore. For some reason the images in the small viewports are smaller than their appearance in large viewports, so I am stumped.
<div class="container-fluid p-2">
<div class="flex-row">
<div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
<div class="d-flex p-2">
<img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
</div>
<div class="w-100 d-none d-sm-flex d-xl-none"></div>
<div class="d-none d-sm-flex p-2">
<div>
<a class="headerLink" href="index.aspx">Home</a>
<a class="headerLink" href="index.aspx">Products</a>
<a class="headerLink" href="index.aspx">About</a>
<a class="headerLink" href="index.aspx">Blog</a>
<a class="headerLink" href="index.aspx">Contact</a>
</div>
</div>
<div class="d-flex d-sm-none p-2">
<img src="img/menu.png">
</div>
<div class="w-100 d-xl-none"></div>
<div class="p-2">
<a href="index.aspx">
<img src="img/btnLogin.png" />
</a>
<a href="index.aspx">
<img src="img/btnRequestDemo.png" />
</a>
<a href="index.aspx">
<img src="img/btnResources.png" />
</a>
</div>
</div>
</div>
</div>
Here's the small amount of extra CSS I have:
body {
margin: 0px;
font-family: Arial;
font-size: 1em;
background-color: #FBFBFD;
}
.headerLink + .headerLink {
margin-left: 10px;
}
a.headerLink {
color: black;
text-decoration: none;
font-weight: bold;
padding: 0px;
}
a.headerLink:hover {
text-decoration: underline;
}
button png images are between 100px x 50px to 200px x 50px
Header for logo is as follows:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logo" x="0px" y="0px" viewBox="49.199989318847656 82.18773651123047 697.5000610351562 155.11227416992188" style="enable-background:new 0 0 792 330;" xml:space="preserve">
viewBox="0 0 792 330" style="enable-background:new 0 0 792 330;" xml:space="preserve">>
I am trying to get it so that the images span across the width of the screen in smaller viewports, but as it stands, the layout is even smaller in a phone than it is on the full desktop setting.
Any help would be greatly appreciated
From the way you wrote your code I understand that your problem is in smaller screens, so based on what you have I wrote the code below:
body {
margin: 0px;
font-family: Arial;
font-size: 1em;
background-color: #fbfbfd;
}
.headerLink+.headerLink {
margin-left: 10px;
}
a.headerLink {
color: black;
text-decoration: none;
font-weight: bold;
padding: 0px;
}
a.headerLink:hover {
text-decoration: underline;
}
#media all and (max-width: 768px) {
figure img {
width: 150px;
height: 50px;
object-fit: cover;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid p-2">
<div class="flex-row">
<div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
<div class="d-flex p-2">
<img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
</div>
<div class="w-100 d-none d-sm-flex d-xl-none">
<div class="d-none d-sm-flex p-2">
<div>
<a class="headerLink" href="index.aspx">Home</a>
<a class="headerLink" href="index.aspx">Products</a>
<a class="headerLink" href="index.aspx">About</a>
<a class="headerLink" href="index.aspx">Blog</a>
<a class="headerLink" href="index.aspx">Contact</a>
</div>
</div>
</div>
<div class="d-flex d-sm-none p-2">
<img src="img/menu.png">
</div>
<div class="w-100 d-xl-none"></div>
<figure class="d-flex p-2">
<a href="index.aspx">
<img src="img/btnLogin.png" />
</a>
<a href="index.aspx">
<img src="img/btnRequestDemo.png" />
</a>
<a href="index.aspx">
<img src="img/btnResources.png" />
</a>
</figure>
</div>
</div>
</div>
Note that I renamed the div responsible for the images to figure just to make the CSS work easier, but you can call it whatever you want.
You want the images to take up the entire width of the screen in smaller viewports but you said the images are between 100px and 200px wide, so it's not clear if you want to resize them, but as an example I used 150px in CSS to be able to illustrate the example.
Notice that I used object-fit: cover for the image to maintain its proportions and fill the dimension provided. But here the image can be cropped to fit. But if you want to expand them at all costs you can use a width: 100vw; object-fit: fill;
On this specific image issue I recommend you check out this link from W3 Schools: CSS The object-fit Property.
As for the .svg you provided I wasn't able to insert it into your code as I don't know its exact location.
If you have any questions, just comment here that according to your needs I will update my answer.
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)
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>
I am using bootstrap so it would place my divs nicely next to eachother but whenever I resize my window to 991px width it makes these divs 100% width ...
code :
<div class="row">
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
</div>
picture (after resizing to 991px width):
Bootstrap 3 is mobile-first, meaning everything is handled as if it's on a small device unless you say otherwise. To change the breakpoint of your columns, use a smaller prefix:
col-xs-2
or
col-sm-2
http://getbootstrap.com/css/#grid
Also, instead of inline styles on your images (yuck), use Bootstrap's responsive image class:
class="img-responsive"
http://getbootstrap.com/css/#images