I'm trying to fit an image inside of the grid area that I've specified but everything I've tried isn't giving me the result I want.
I want the image to fill the space without cropping the image. Is that possible?
Result of Code below: https://imgur.com/FhYWUDZ
Original Image I would like to fit: https://imgur.com/c3jpM7D
body{
width: 100vw;
height: 100vh;
color: black;
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
}
.container{
display: grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows: 0.5fr 3fr 1fr;
height: 100vh;
}
.image{
background-image: url(./assets/header_img.jpg);
width: 100%;
height: 100%;
grid-area: 1/1/3/-1;
object-fit: fill;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="nav">nav</div>
<div class="image">image</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
You could add background-size: 100% 100%; and it will fill it comletely without cropping it. Though it will stretch the image to fit the grid.
See here:
body{
width: 100vw;
height: 100vh;
color: black;
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
}
.container{
display: grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows: 0.5fr 3fr 1fr;
height: 100vh;
}
.image{
background-image: url(https://i.imgur.com/c3jpM7D.jpeg);
background-size: 100% 100%;
width: 100%;
height: 100%;
grid-area: 1/1/3/-1;
object-fit: fill;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="nav">nav</div>
<div class="image">image</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
Related
Tried a lot of ways and a lot of Codes, but its not working website width does not stay in screen. Always enables space to the right side and content is bigger than screen.
tried width and height 100vw; max-width: 100%;
also tried giving the body a specific width
`body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
border: solid;
padding-left: 2px;
}
* {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
padding: 0 0px;
}`
<
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Try</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="galery.css">
</head>
<body>
<div class="container">
<div class="logo-wrapper">
<a href="index.html"><img src="/Users/Desktop/Website/images/AdobeStock_491355559.jpeg" style="width: 100%;"></div>
<div class="nav-wrapper">
<div class="nav-link-wrapper">
Home</div>
<div class="nav-link-wrapper">
Stuff</div>
<div class="nav-link-wrapper">
About</div>
<div class="nav-link-wrapper">
contact</div>
</div>
i'm new on this forum, and kinda new also in coding... I'm trying to code a very simple page, and I don't know how to select scroll-snap-type, this option doesn't show at all also in the code suggestions in CSS. I would like to apply scroll- snap to the "blocHorizontal" container I made in HTML...so that the div classes inside of it can be scrolled and centered horizontally. I show you what I'm doing:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta charset="utf8">
<title>Contre-argument:télécharger n'est pas voler</title>
</head>
<body>
<marquee><h5>Culture libre</h5></marquee>
<!-- HEADERS -->
<h2></h2>
<div class="container">
<div class="blocHorizontal">
<div class="slide one"><img src="gifs/ezgif.com-gif-maker(1)bittles.gif"></div>
<div class="slide two"><img src="gifs/ezgif.com-gif-makepr.gif"></div>
<div class="slide three"><img src="gifs/ezgif.com-gif-makder.gif"></div>
<div class="slide four"><img src="gifs/ezgif.com-gif-makerwww.gif"></div>
<div class="slide five"><img src="gifs/ezgif.com-gif-maker(1).gif"></div>
<div class="slide six"><img src="gifs/ezgif.com-gif-makerliquid.gif"></div>
<div class="slide seven"><img src="gifs/ezgif.com-gif-maker.gif"></div>
</div>
</div>
</body>
</html>
And this is the CSS:
body {
background-color: yellow;
display: flex;
margin: 0;
padding: 0;
font-family: serif;
}
.slide {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.blocHorizontal {
height: 100vh;
display: flex;
flex-direction: row;
overflow: scroll;
}
.one {
height: 100vh;
background-image: url("../images/gnegne3.jpg");
background-size: 200%;
}
.two {
height: 100vh;
background-image: url("../images/gnegne4.jpg");
background-size: 200%;
}
.three {
height: 100vh;
background-image: url("../images/gnegne5.jpg");
background-size: 200%;
}
.four {
height: 100vh;
background-image: url("../images/gnegne6.jpg");
background-size: 200%;
}
Any suggestions???I might have done simple errors, I'm really not an expert in coding fo no Thanks in advance :-)
I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.
Image is 660px and Right container is 860px.
<div className="container">
<div className="image-container">
<img src={image} />
</div>
<div className="right-container">
<div className="insde-some-text">
</div></div>
As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.
To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.
Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.
.red-block
{
width: 20rem;
height: 20rem;
background-color: red;
position: absolute;
}
.blue-block
{
width: 20rem;
height: 20rem;
background-color: blue;
position: absolute;
top: 50%;
left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class = "red-block">
</div>
<div class = "blue-block">
</div>
</body>
</html>
You could use this for reference. Simple demonstration using flex and margin.
.wrapper {
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 100%;
}
.right-container {
border: solid red 1px;
border-radius: 5px;
width: 860px;
height: 860px;
background-color: #e1e1e1;
text-align: center;
}
textarea {
height: 80%;
width: -webkit-fill-available;
text-align: center;
background-color: lightblue;
}
.img {
margin-right: -3em;
position: relative;
}
img {
max-width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="img">
<img src="https://dummyimage.com/660x400/000/fff" alt="">
</div>
<div class="right-container">
<textarea placeholder="hello world"></textarea>
<p>foooooooooooooooooooooo</p>
</div>
</div>
</div>
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
when i try to display blocks in grid then there is space at the end of grid item on right side and there is no space at the start of the grid i.e at the left side . You can see screenshot and code. i cannot figure it out what is the problem. I hope you can figure it out.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gird-section{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 40px;
background-color: yellow;
}
.grid-item{
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="gird-section">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
You can use Css Grid Layout
I have edited your code so you can have yellow space left and right. I added width in the first section in order for the parent to have more with then the child . For more editing I suggest to watch the link above.
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>