I am trying to create a responsive image gallery (JSFiddle) with CSS Grid but when I add images to the grid elements, the images don't fill their entire size. I don't care about aspect ratio, I just want the image to fit exactly into the parent div while the size of the parent div remains the same (squared).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
width: 100vw;
}
.view-container {
padding: 20px;
width: 70%;
margin: auto;
border: solid red;
display: flex;
justify-content: center;
}
.view-grid {
flex: 1 1 auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
list-style: none;
}
.grid-el-container {
width: min(300px, 100%);
padding-bottom: min(300px, 100%);
background: blue;
border: solid;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
}
.grid-el-bg {
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSS Grid</title>
</head>
<body>
<div class="view-container">
<div class="view-grid">
<div class="grid-el-container">
<div class="grid-el-content">
<img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" class="grid-el-bg">
</div>
</div>
<div class="grid-el-container"><div class="grid-el-content">Box 2</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 3</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 4</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 5</div></div>
</div>
</div>
</body>
</html>
There are 2 main problems here. The first is that the div containing the element doesn't take up its entire parent, so the image is already at 100% height and width. The second is that you're only setting the max height and width of the image, not the actual height and width.
Let's address the parent first. This can simply be solved by adding width: 100%; and height: 100%; to the parent div. If you only want the div to have 100% height and width if it has an image inside of it, you will probably have to write some JavaScript to handle that.
Now let's go to the actual image. Really it's a matter of adding the exact same thing here (width: 100% and height: 100%). This alone should resolve your issue, but there is one more thing I would like to add. I know you said you don't care about the aspect ratio, but, if you would rather the image be cut off than distorted, you can use object-fit: cover; here as well.
Here is a JSFiddle with the revised CSS
The completed CSS after the changes:
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
width: 100%;
height: 100%;
}
.grid-el-bg {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
Try this:
.grid-el-bg {
object-fit: cover;
}
Remove min-width and min-height from this class.
Related
I want to display an image on the webpage. The image is long enough having fixed height. So, when someone checks responsiveness by decreasing screen-size it should remove the extra size from that div(which is happening).
I don't know the particular term. So, I will try to explain. it should be shown from the centre point. If image is "abcdefgh". Assume 'a','b'... all are grid number. The default behaviour when screen size will be relatively half is "abcd", but I want to display "cdef".
I gave overflow: hidden to remove extra image out of div. I tried margin-left, margin-right both auto. But, it is only required when the image is less than div size.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<body>
<div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;">
</div>
</body>
</html>
You can add object-fit: cover to 'crop' the image responsively
I used object-fit: cover;, this works.
img {
display: block;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<body>
<div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;">
</div>
</body>
</html>
Only object-fit: cover will not work. It also needs width and height values. For best practice give height value. Please this value should not in percentage(%). And give image width: 100% and height: 100%. It will work.
.parentDiv {
border: 4px solid black;
width: 80%;
height: 250px;
margin: 0 auto;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="parentDiv">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris"><div>
Please check this link: jsfiddle
You can set fixed size for image an use object-fit: cover in css.
.wrapper {
border: 4px solid black;
height: 200px;
overflow: hidden;
text-align: center;
}
.img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
object-fit: cover;
}
<div class="wrapper">
<img class="img" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris">
</div>
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I have a div of fixed width and height.
I want to put and image and caption to it (using img and figurecaption) such that they both never exceeds the dimensions of the parent.
I tried this :
`
parent->
height: 100px;
width: 100px;
margin: 0;
img->
display: block;
height: 100%;
width: 100%;
figurecaption->
text-align: center
`
When the image is of greater size than the specified height and width, the caption goes outside. How to deal with this. Thanks.
If you are trying to avoid both the image and the caption going outside the parent container, you have several options. The nicest might be to set the image max-height and max-width to 100% and then to overlay the caption on the bottom. If you want to keep them completely separate, you can do something like this:
#container {
height: 400px;
width: 300px;
border: 1px solid #000000;
text-align:center;
}
#image {
max-height: calc(100% - 50px);
max-width: 100%;
}
#caption {
background: #282828;
max-height: 50px;
width: 100%;
text-align: center;
color: #ffffff;
}
<div id="container">
<img id="image" src="http://www.fixedstars.com.au/images/runBack.jpg">
<div id="caption">This is the caption</div>
</div>
This sets the maximum height of the image at100% less the height of the caption. If you prefer for the caption to be stuck to the bottom of the container, even if the image is shorter, st the container to position: relative and give the caption position: absolute; bottom:0; for the container and the caption.
To Fix this issue you have to set width and height to 100% for Image
Below is the complete demo.
Hope this will helpful to you.
<style>
.mydiv {
border-color: red;
border-style: solid;
height: 50px;
width: 80px;
}
.imgStyle {
height: 100%;
width: 100%;
}
</style>
<html>
<div class="mydiv">
<img src="http://www.boltoday.com/wp-content/uploads/2014/10/only-3d-natural-1024x768.jpg" class="imgStyle" />
Your Text Goes Here
</div>
</html>
I have this example layout.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
padding: 0;
min-width: 960px;
height: 500px;
border: 1px solid red
}
.boxed-layout .wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.inner {
width: 960px;
position: relative;
margin: 0 auto; /* main width */
}
.responsive .inner {
max-width: 960px;
width: auto;
}
</style>
</head>
<body>
<div class="inner wrapper"></div>
</body>
</html>
Now I need to add a div full width into wrapper. So i tried this way
.banner {
position: relative;
left: -100px;
max-width: 2000px;
width: auto;
border: 1px solid green;
height: 400px;
}
and
<div class="banner"></div>
but does not work well.
Is it correct to use relative positioning with negative left to move it to zero?
If I use width: 2000px instead of auto, appears the horizontal scroll bar
So, how can I have the full width and responsive?
You have to remove position:relative from your wrapper container (i.e. inner class contrainer). Then for banner use following markup:
HTML
<div class="banner">
<div class="banner-inner"></div>
</div>
CSS
.banner {
position: absolute;
left: 0;
right: 0;
}
.banner-inner {
position:relative;
margin:0 auto;
max-width: 2000px;
}
If you dont want to remove position:relative for some reason then you have to use javascript/jQuery as follows (keep markup same as above):
var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});
Just give width: 100% for your div inside the wrapper. Sounds good?
.banner { border:1px solid green;height:400px;}
do not give width it's automatically take full width
According to the accepted answer, the OP's actual problem is that there is one 960px width container & there is a child div which needs to be 100% of body (not the parent) as per screen size. This as as easy as
.banner {
width: 100vw;
}
No need to change any other original properties.
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-- MDN
<html>
<head>
<style>
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
* { margin: 0; padding:0; }
.topbar {
min-width: 100%;
min-height: 50%;
background-color: green;
}
.fill {
min-width: 100%;
min-height: 50%;
background-color: white;
}
.container {
min-width: 100%;
min-height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div class="topbar">
"topbar
<div class="fill">
"fill"
<div class="container">
"container"
</div>
</div>
</div>
</body>
</html>
Why "fill" is not taking the complete 50% of its containing element "topbar" on the screen?
Why "container" is not taking complete 50% of its containing element "fill" on the screen?
Separate Question:
My goal is to create a layout which can fit almost all screens desktops/laptops. I am not focusing on phone screen layouts for now. I am trying to use width and height as percentages for my layout. Please suggest if that is the right approach or point me to alternatives.
Because the body's height is uncertain.You need a parent dom
When you use percentage for height and width, it's important that the parent element has specific size in pixel...
in this case "topbar" class should have size in pixel