I've been trying to achieve something like this gallery style layout using flexbox: Example of desired outcome
I want images (regardless of size) to sit next to each other in a two column layout until mobile layout where it's only 1 image for each line. When the two images sit next to each other I want them to scale to the size of the largest one of the two without stretching or distorting either picture.
My current attempt can be found here: Codepen
You can see that I've tried two methods, each have resulted in different problems.
I'll stick to the stretched image issue as that's currently closest to my desired outcome.
<div class="wrapper">
<header>
MY HEADER
</header>
<section>
<a href="" class= "unitie">
<img src="http://www.landscapes.org/london/wp-content/uploads/sites/8/2015/09/roadmap-to-landscapes-finance.jpg" />
</a>
<a href="" class= "meow">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bd/99/3e/bd993e9921e1131fef606fcd99a03494.png" />
</a>
</section>
<footer>
2016
</footer>
</div>
CSS:
.wrapper {
display: flex;
flex-direction: column;
}
header {
display: flex;
}
section {
display: flex;
flex-flow: row wrap;
}
a {
width: 48%;
margin-left: 10px;
}
img {
max-width: 100%;
height: 100%;
}
I found this idea online: Using aspect ratio for flex property
But I have no idea how to find the aspect ratio of any image and convert it into the flex grow property value like he did.
Any help would be much appreciated.
Lot going on here.
First, make sure all your html tags close correctly.
Second, its class="name" not class "name"
Finally, the only way to make an html, inline image to fit a container is to have remove it from pageflow and then absolute position it so it is either taller or wider than its container based on the image properties.
The easiest way to do this is to move it into a css background image.
<a href="" class="unitie grid--image" style="background-image:url('image.jpg')>
</a>
.grid--image {
background-size: cover;
}
Related
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>
I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.
If I make the container width's smaller than the images, all the divs are uniform nicely.
But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you
PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more
(specifically it forces items to stay on one line [no matter the count])
Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.
&__img {
width: 100%;
}
Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).
as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.
I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
}
#container{
display:flex;}
<div id='container'>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
</div>
<br><br>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
Try this.
<html>
<head>
<style>
.page {
width: 500px;
}
.container {
float: left;
width: 50%;
}
img {
float: left;
width: 100%;
height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
</div>
<div class="container">
<img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
</div>
</div>
</body>
</html>
I am trying to create a tournament diagram.
This is the blank diagram.
What I am trying to do is to insert the logos from the different teams into the blue spots. What I did is to create a div which contains the diagram and then insert the logos with a relative position to the picture.
<html>
<style>
.head{
position: relative;
left: 10px;
bottom: 90px;
}
</style>
<body>
<div>
<img src="diagram.png">
<img src="logo.png" class="head">
</div>
</body>
</html>
The first logo would then appear in the first spot.
When I resize the diagram with the screen I don't know how to resize the logos in the same way so they stay at the same spot and have the right ratio. Because I would like to fit the diagram on every screen I want to resize the whole thing so it fits on each screen. I don't care about mobile.
Is there a way to resize the whole thing at once?
Provide us with more codes and the clear problem you have. and if you have any other questions feel free to ask in the comment.
What you are doing right now is hard coding every logo to its position that's why when you resize the browser window it doesn't fit as you wanted.
I suggest you read flex-box documentation and here's a good tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem with this method is that you're trying to make the images relatively positioned to the body, meaning if one were to resize the body (or the viewport I should say), the images would become offset from the background tournament diagram. If you want them to stay in place no matter the size of the viewport, there are two option I see:
Create a tournament diagram in pure CSS and place every image into the corresponding div.
Use a 2D design program to create an image with all of the logos already on the tournament diagram.
Here's an example of method 1 using CSS Flexbox.
body {
display: flex;
align-items: center;
flex-direction: column;
}
.team-logo {
width: 50px;
height: 50px;
background: blue;
color: white;
display: flex;
align-items: center;
text-align: center;
margin: 0 10px;
}
.downwards-stem {
width: 10px;
height: 100px;
background: teal;
}
<body>
<div class="team-logo">Insert Logo</div>
<div class="downwards-stem"></div>
<div style="display: flex; margin-top: -20px;">
<div class="team-logo">Insert Logo</div>
<div class="team-logo">Insert Logo</div>
</div>
</body>
Here's an example using a 2D Design program. I prefer to use Figma
This question already has answers here:
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 6 years ago.
I'm working on a navigation bar for a page using only HTML and CSS. It should look like this, with the logo setting the height of the containing div, then with the text vertically centered in other divs next to it.
What it should look like:
I've tried to do this by setting up some nested flex boxes. The idea is that:
The container (nav-holder) stretches to fit the tallest content
The second container (nav-item) should all be as tall as its parent
The third container (nav-cont) should be as tall as its own content, and should be vertically centered inside nav-item
Instead, I'm ending up with an odd extra bit of space at the bottom of my logo inside nav-cont, and I can't work out where it's coming from.
It looks like this:
What it really looks like:
HTML code:
<div id="header">
<div id="nav-holder">
<div class="nav-item">
<div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
</div>
<div class="nav-item">
<div class="nav-cont">Listings</div>
</div>
<div class="nav-item">
<div class="nav-cont">Services</div>
</div>
<div class="nav-item">
<div class="nav-cont">About</div>
</div>
<div class="nav-item">
<div class="nav-cont">Blog</div>
</div>
<div class="nav-item">
<div class="nav-cont">Contact</div>
</div>
</div>
</div>
CSS Code:
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
}
.nav-cont {
background-color: green;
}
Attempted fixes:
Checked to see if there was a margin or padding set for images or for divs in general.
Looked for information in the most similar solved problem on StackOverflow ("CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height")
Went through a couple of flexbox tutorials to see if there were any similar issues described, including "Solved by Flexbox" on GitHub and "Dive into Flexbox" by Greg Smith
I have took at look at your code and changed some CSS to try to get the idea of what you want.
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
padding: 10px;
}
.nav-cont {
background-color: green;
width: 70px;
text-align: center;
}
Here is a Jsfiddle:
https://jsfiddle.net/r3msjtnL/
You had to change the nav-cont div to a pixel and float the text in the center, so it is not unbalanced. Also, I added a padding to make space around your nav.items.
Update:
If you do not want your buttons being fixed to a specific pixel, attempt changing the width to a percentage (%) instead !
If this helped vote up !
I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist.
Here are the images.
This is the HTML
<div class="car-item">
<div class=" car-image">
<img src="/~/media/images/thumb.ashx" alt="Image 1" />
</div>
<div class="car video">
VIDEO
</div>
<div>
position for car video is absolute
position for car item is relative
and for car-image is static
You will have issues at times when using percentages. This is a good example of when to use absolute positioning.
I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.
You might have to modify your HTML and CSS a little furthor to get it to work in your environment.
http://jsfiddle.net/6C8gT/
Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.
I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.
HTML
<div class="container">
<img class="thumb" src="http://lorempixel.com/300/200/" />
<span>Video</span>
</div>
CSS
.container {
position: relative;
}
.container img {
display: block;
}
.container span {
color: white;
background-color: black;
padding: 5px 10px;
position: absolute;
left: 0;
bottom: 0;
}