All my searches tell me to make the img {max-height: 100%} but that doesn't seem to have any effect.
I don't understand if I've set the height of the parent container (earth-block), why setting the img height won't constrict the image to that size.enter image description here
.earth-block {
height: 200px;
}
.earth-block img{
max-height: 100%;
}
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div>
</div>
</div>
this ll help you out
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.earth-block {
height: 200px;
background-color: aliceblue;
display: flex;
}
.earth-block img{
flex-grow: 100;
object-fit: none;
object-position: center;
}
</style>
</head>
<body>
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div>
</div>
</div>
</body>
</html>
Related
html,
body {
height: 100%;
margin: 0px;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: yellow;
}
.box {
flex-shrink: 0;
}
<div>
<div class="container">
<div class="box">
<h1>A</h1>
<p>clap</p>
</div>
<div class="box">
<h1>W</h1>
<p>clap</p>
</div>
<div class="box">
<h1>S</h1>
<p>clap</p>
</div>
<div class="box">
<h1>D</h1>
<p>clap</p>
</div>
<div class="box">
<h1>Q</h1>
<p>clap</p>
</div>
<div class="box">
<h1>E</h1>
<p>clap</p>
</div>
<div class="box">
<h1>R</h1>
<p>clap</p>
</div>
</div>
</div>
how to (.containeri) full screen with flex display?
I want full window full height and width with flex?
I use height 100% but it is not full window with flex property.but in grid it is 100% window with height anf width
It looks like you need to set shrink to 0 to prevent the flex items from shrinking:
.container {
display: flex;
width: 100%;
height: 100%;
background-image: url("asso-myron-HZCBJmlUPas-unsplash.jpg");
}
.flex-item {
flex-shrink: 0;
}
An example:
.flex-container {
display: flex;
width: 100%;
height: 100%;
}
.flex-item {
flex-shrink: 0;
}
<div class="flex-container">
<div class="flex-item">
1
</div>
</div>
Try these codes.
body {
margin:0;
}
.container {
height:100vh;
background-repeat:no-repeat;
background-size: 100% 100%;
object-fit:cover;
display: flex;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxD1r0WianEq0iQy_H8INxLhdpmcz6c_DslA&usqp=CAU");
}
<body>
<div class="container"></div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-flex p-3 bg-secondary flex-shrink-0 text-white">
<div class="p-2 bg-info">Flex item 1</div>
</div>
</body>
</html>
I think you want this.
If not then Kindly attach html code.
div element is block element and default display property is block , to display it in line , inline-block property can be used.
<!DOCTYPE html>
<html>
<head>
<title>Pictures</title>
<style type="text/css">
.row {
height: 50px;
width: 50px;
}
.row1 {
padding-bottom: 12px;
display: inline-block;
float: left;
padding-right: 14px;
}
.row2 {
display: inline-block;
}
}
#img1 {
max-width: 50%;
max-height: 20%;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="content">
<div class="row">
<div class="row1">
<!--img height="50px" width="50px" src="images/image1.jpg"-->
hello
</div>
<div class="row2">
Beutiful picture clicked by photographer
</div>
</div>
</div>
</body>
</html>
I don't understand why these 2 divs are not getting display side by side , i am using inline-block but still no help.
It is because the .row has width so less such that it can't accomodate both div. Try this it will make both parallel.
.row {
height: 50px;
width: 1000px;
}
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
I have the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center's content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.
I would be very grateful for any idea on how to fix the issue.
Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.