I've created a carousel of images inside of a flexbox, and given each of them a width of 200px. I'd like the images to resize at the same rate when I shrink the window, so I gave them each a flex-shrink value of 1.
However, as you can see from the gif, only the second image resizes when I shrink the window (the others stay the same width). I checked the original file sizes and noticed that the second image also has the smallest width (so I assume this could be causing the issue?)
However, I'm not exactly sure how to fix this. Any help would be appreciated.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="slider">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(46, 46, 46)
}
h1 {
font-family: helvetica;
color: white;
}
.container {
padding: 30px 20px;
text-align: center;
max-width: 1000px;
min-width: 500px;
background-color: rgb(66, 66, 66);
margin: 0 auto;
}
figure {
text-align: left;
}
figcaption {
color: white;
}
img {
width: 100%;
}
.gallery {
display: flex;
flex-flow: column;
}
.slider{
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.slider img {
display: block;
width: 200px;
max-height: 200px;
object-fit: cover;
flex-shrink: 1;
}
In this case if you don't want to add any extra markup just replace width:200px; in .slider img to min-width:200px;.
If you want to maintain a completely fluid layout you could replace min-width:200px; with something like min-width:25%.
As I mentioned in my other answer if you're willing to add a container to each of these images you'll have a bit more control as you can make the image expand to fill the container, regardless of what its dimensions are.
Try using a media query
example:
#media(max-width:700px){
.slider img {
width: 100px;
height: auto;
}
}
Related
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
I'm building a component that will have variable content. So I'd like the img to respond like a bg img, taking the height of it's container rather than defining the height. Even when I define add object-fit: cover though, the img still affects the height of it's parent. I want the text to define the height of the parent, not the img. I would prefer not to use a background img as the image is populated via a wysiwyg editor and I don't have control over where the uploaded img is loaded (ie. it has to be an img). Thanks for your help.
Codesandbox
CODE:
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>
</body>
</html>
you are missing the flex-basis CSS property
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
[class$=item]{flex-basis: 120px;}
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>
I have a flexbox that has two columns, each of which is 50% wide.
Then I want to add a big square picture in the right column, the height of the picture should be determined by the contents' height in the left column. (More content will be inserted into the left column in the future)
But the height and max-height always don't work with my image in the flexbox
, which causes the right column to be stretched.
CodeSandbox: https://codesandbox.io/s/modest-rgb-u7k3k
Ideal:
Image link 1
Real:
Image link 2
NOTE: I added a set height of 150px to #flexbox and changed the image url to a direct link for demonstrative purposes so you can see it working in action.
First, you had ".img-wrapper" instead of ".wrapper" for the img css, not sure if that was on purpose or not but i switched it to ".wrapper" since that was the parent classname. Second, you only need the max-width for the effect to work. For the img css, I added "object-fit: cover" which maintains the img's aspect ratio while filling the entire container. Last, I gave the ".wrapper" container a "text-align: center" property so that the img will be centered in the container.
* {
box-sizing: border-box;
}
body {
width: 400px;
}
#flexbox {
display: flex;
height: 150px;
}
#flexbox .item:first-child {
flex: 0 0 50%;
padding: 10px;
background-color: bisque;
}
#flexbox .item:last-child {
flex: 0 0 50%;
padding: 10px;
background-color: aquamarine;
}
#flexbox .item:last-child .wrapper {
width: 100%;
height: 100%;
background-color: red;
text-align: center;
}
#flexbox .item:last-child .wrapper img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<div id="flexbox">
<div class="item">
This is the first box.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
</div>
<div class="item">
<div class="wrapper">
<img src="https://i.imgur.com/HyWA2Jq.png" />
</div>
</div>
</div>
</body>
</html>
Within a single-column CSS grid, I have a div running a js slideshow that sits atop a second div. When I scale the site down, those two divs pull away from each other. I would like to be able to maintain a constant distance between the two divs, but I can't get that to work. The div classes in question are "slides" and "centertext".
Here's a link to the site at codepen
Thank you for any help.
Here's the HTML
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div class="maingrid">
<div class="slides">
<img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out3.png">
<img src="http://tests.markgarvey.com/slideshow_images/out4.png">
<img src="http://tests.markgarvey.com/slideshow_images/out5.png">
<img src="http://tests.markgarvey.com/slideshow_images/out6.png">
<img src="http://tests.markgarvey.com/slideshow_images/out7.png">
<img src="http://tests.markgarvey.com/slideshow_images/out8.png">
<img src="http://tests.markgarvey.com/slideshow_images/out9.png">
<img src="http://tests.markgarvey.com/slideshow_images/out10.png">
</div><!-- end of slides div -->
<div class="centertext">
<img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
<p class="name">FIRSTNAME LASTNAME</p>
<p class="address">1234 Example Street<br>
Princeton, New Jersey 12345<br>
testing#email.net<br>
505.422.6563</p>
<p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light untonsured hair, grained and hued like pale oak.
</p>
</div><!-- end of centertext div -->
</div><!-- end of maingrid div -->
</div><!-- end of wrap div -->
<script>
function nextSlide() {
var q = function(sel) { return document.querySelector(sel); }
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
</body>
</html>
And here's the CSS
#wrap {
max-width:100%;
width:1000px;
background:#FFF;
margin: 0 auto;
}
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
margin-top:50px;
}
.centertext {
align-self: center;
justify-self: center;
margin-top:20px;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
text-align:left;
letter-spacing: normal;
line-height: 19px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
color:#000000;
font-size:1em;
line-height: 20px;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-size:1.5em;
font-weight:bold;
font-variant:small-caps;
margin-bottom: 5px;
}
.address {
margin-top: 8px;
line-height: 24px;
font-family: Arial, sans-serif;
color:#000000;
font-size:1em;
line-height: 19px;
}
/* the slide container with a fixed size */
.slides {
width:100%;
max-width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width:100%;
max-width: 1000px;
margin-bottom:60px;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2; /* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
The issue is to do with the fixed height on the .slides div. As you zoom in the width of the visible image is not allowed to overflow the page width, so eventually the .slides div contains significant white-space at the bottom.
It can be fixed by changing
.slides img {
...
width:100%;
max-width: 1000px;
...
}
to
.slides img {
...
width: 1000px;
...
}
Assuming that does not impact some other behaviour (looks fine to me in chrome on your CodePen demo)
#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.