I'm trying to draw three rectangles in a page. The top rectangle has to be much smaller than the other two. You can see the top rectangle has a flex-grow: 1 (compared with 5 for other rectangles).
However, once I put three images inside the top rectangle, it gets taller, so it becomes bigger than other rectangles.
What can I do to prevent the top rectangle from getting taller? I just want the pictures' size to be adjusted to fit in the original container size.
I'll be glad for a solution using flexbox features (because I'm trying to learn it).
html,
body {
width: 100%;
height: 100%;
flex-flow: column wrap;
display: flex;
}
div {
flex-grow: 5;
display: flex;
border: solid;
margin: 1em;
}
#top {
flex-grow: 1
}
<div id="top">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</div>
<div id="middle"></div>
<div id="bottom"></div>
http://codepen.io/CrazySynthax/pen/ZBPXry
Your max-height of 30% is bigger than the rectangles initial size. Try setting fixed height for it or lower the max-height to match the initial size. On the code pen I used max-height: 20%; and got the result you are looking for, however to be consistent on all displays I would just set the height to a fixed percentage. ex: height: 20%. Also there is no point of using max-height if you don't want your div's height to change.
Related
I need to fit an image into a fixed width/height div (say 80%/80%), but I also need the image to be wrapped in another div so that I can place an absolutely positioned element on top of the image (using that wrapper div as the anchor). I have accomplished the first point by just setting the max-height and max-width of the image to 100% so that it will always take up 100% of one dimension and won't exceed the other while maintaining aspect ratio, but I am unable to figure out a way to wrap the image in a div such that there is no extra space in the wrapper. I was under the impression that using display: inline or display: inline-block on the .wrapper div should shrink to the size of it's content (the image in my case), but that does not appear to be the case. When I replace the image with a test div with a defined width and height, the wrapper works as expected, i.e. there is no excess yellow background from the wrapper, it is exactly the same size as the div. How can I achieve the same behavior with the image? I've tried using all sorts of combinations of different display modes (flexbox/inline/block) and various min/max heights/widths but none have worked.
I've put an example of what my HTML looks like now, and what I would like it to look like if I could get this to work below. The .window element is a stand in for whatever the parent of the container is. The .container element is where I'd like to fit the image. In the example with the image, the inline wrapper is still larger than the image (which can be seen by the yellow overflowing on the sides). In the example after that with just a fixed size div (colored green), the wrapped properly shrinks to exactly the size of the div. Can this be accomplished with just css without knowing anything about the size of the image itself?
.window {
height: 400px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
.container {
height: 80%;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: blue;
}
.wrapper {
display: inline;
max-height: 100%;
max-width: 100%;
background: yellow;
}
img {
max-height: 100%;
max-width: 100%;
}
.test {
width: 64px;
height: 128px;
background: green;
}
<div class='window'>
<div class='container'>
<div class='wrapper'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/ReceiptSwiss.jpg/1920px-ReceiptSwiss.jpg" />
</div>
</div>
</div>
<div class='window'>
<div class='container'>
<div class='wrapper'>
<div class='test' />
</div>
</div>
I have a div element on top of which I am overlaying a vertical sidebar that consists of vertically stacked svg icons. I need the sidebar to be always the same height as the parent and either shrink/grow the icons whenever the window size is changed, to fill the empty space.
I've managed to atleast keep them the same size when making the window bigger, but the sidebar refuses to shrink down from a certain point.
I think that the images won't shrink because their parent div (sidebar) doesn't shrink beyond the sum of 7 icons' heights combined. Nor does it really scale the images bigger, flexbox actually just adds more empty space as the height is increased, which at this point is okay. Actually, it would be ideal that they are not initially bigger than x, and scaling up would increase the space and scaling down would first shrink the empty space as much as possible and then shrink down the icons.
I've tried 2 Google searches pages worth of solutions, along with min-width, object-fill and others. and I can't seem to solve it - the sidebar indefinitely overflows from the parent if parent is compressed so that it's height will be less than the heights of all 7 icons combined.
.sidebar {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
.sidebar-item {
flex: 1 1 auto;
background-color: black;
position: relative;
z-index: 1;
}
.sidebar-item img {
width: 100%;
height: auto;
}
<div id="map">
<div id="sidebar" class="sidebar">
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon1" alt="icon1">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon2" alt="icon2">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon3" alt="icon7">
</div>
</div>
</div>
Solved by adding these properties to sidebar-item:
display: flex;
min-width: 0;
min-height: 0;
demo: https://codesandbox.io/s/confident-bash-55v3z
I was following along some tutorial and I encountered this problem. the code is simple
I have flex container called images
<div class='images'>
<img src='imgs/787.jpg' class="main" />
<img src='imgs/sub1.jpg' class="sub1" />
<img src='imgs/sub2.jpg' class="sub2" />
</div>
and for the stylesheet I have
.images {
width: 234px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid red;
}
.images > * {
padding: 1px;
height: 111px; <--- this seems like a magic number to me
}
img.main {
flex-basis: 99%;
}
img.sub1,
img.sub2 {
flex-basis: 49%;
}
the intended look is like this
However when I commented out the height: 111px;line, the layout is off
I am new to flexbox and css in general and I know that flex-basis is soft of like min-width. Without the height being 111px, the image will grow to occupy more space than its min-width(or flex-basis).
So my question is, to achieve the correct layout we want, how did the original author of the style sheet know that the height needs to be 111px? Can we achieve this layout using 'max-width' or other techniques which would make more sense to me?
First, about the magic number.
You have a container that is 234px wide, and two smaller images that have natural dimensions of 150px by 150px. Their combined width is 300px, which is larger than the container width, so they don't fit in the same row.
We can fix this by making them smaller. But how small do they need to be? There's a 1px padding around each image, for two images that's 4 pixels. We need to subtract that from the container width. Which leaves 234 - 4 = 230 pixels for two images, or 230 / 2 = 115 pixels for each image.
In your example the size of images is controlled using height and flex-basis. Using both at the same time can lead to distorted proportions. This actually happens to the top image in your 'intended look' example. If you compare it to the original image you can see that it's squashed vertically.
Also the interaction of height and flex-basis is quite unintuitive. To achieve the desired layout we don't actually need both, so let's put flex-basis aside.
When you set height of the image without setting its width, the image will automatically scale proportionally. Since our images are square, by setting the height to 111px we implicitly set the width to 111px as well. And since 111 is less than 115 both images fit in the same row. There's nothing magic about the number 111, any number below 115 will work.
We can simplify the code a little:
.images {
width: 234px;
display: flex;
flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
border: 1px solid red;
}
.images > * {
align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
box-sizing: border-box; /* include padding into the image width */
padding: 1px;
}
img.main {
width: 100%; /* occupy entire row */
}
img.sub1,
img.sub2 {
width: 50%; /* occupy half of the row */
}
Demo: https://codesandbox.io/embed/focused-faraday-bsd88
Try changing the width of the container to 500px or 100px. The images will scale automatically and will keep their proportions.
Instead of flex-basis, try adding width. This will keep 2 images in one line. flex-basis on the other hand, is for initial image size.
img.sub1, img.sub2 {
width: 50%;
padding: 0;
}
You are not setting any width or height to your images, so by default they take their true dimensions. In this case your "sub" images are wider than the width you define to your container, thus, by flex-flow: row wrap; the images can't be on the same line. you should set 50% width to your sub images, or set a bigger width to the container.
I fixed it here
I have a div wrapping an image on the left and a div containing text on the right with some margin between the two. When the window size narrows I want the text to shrink between its max-width and min-width, the image to shrink at the same time so they stay next to each other, and only after the text shrinks to have it jump below the image.
But what happens is - as soon as the text hits the image it jumps below instead of shrinking to its min-width and trying to stay next to the image.
My code is something like this:
<div class="container">
<img class="headshot" src="..." />
<div class="bio-text">
<h3>BIO</h3>
<p>Lorem ipsum...</p>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 80%;
margin: auto;
}
.headshot {
max-width: 100%;
height: auto;
margin: 40px;
}
.bio-text {
max-width: 450px;
min-width: 250px;
}
Any insight would be greatly appreciated!
One problem you have is that you are mixing a flexbox with min and max widths, which conflict with the layout of .container. One option is to assign .bio-text a flex of 250px, and let it grow to take the rest of the space. If the container cannot fit both, it will wrap the text below the image.
I have a codepen with that idea: https://codepen.io/sirech/pen/BYJJdz
Would this fit your needs?
This code shows the image at 100%. The images are too big to be shown at 100% in the space where this code will be inserted, thus I need to show them using scrollbars.
<div style="overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
This code shows the image at 100% with scrollbars within a 500px x 500px division. I don't; however, want a fixed size for the outer division.
<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
I want to adjust the outer division to act as a picture viewer for seeing full size images with scrollbars.
I want the outer division to fill the available horizontal space, which I do not know and will change depending upon the viewer's monitor. The height should auto adjust but not fill the available space as there will be a series of such picture viewer divisions stacked vertically.
The images I will be inserting are large and will 99.9% of the time exceed the available space thus I need the scrollbars.
I don't want the pictures to be resized to the size of the outer division or vice versa.
I can't use any scripts or active content. It must be pure css and html only.
I cannot hard code the pixel sizes of the images as a application will be inserting the image code via a loop and the application does not have any ability to insert the image's width or size.
Keep the outer wrapper at width: 100% and figure out a height that fits your use case.
For responsiveness, I get it suits you better to select the height based on viewport units so that it doesn't fill or stretch beyond the available height (I am taking 50vh here as an example)
Maybe this also helps you.
Snippet below:
body{
margin: 0;
}
*{
box-sizing: border-box;
}
.wrapper{
overflow: auto;
border: 1px solid;
width: 100%;
height: 50vh; /* adjust / omit this as per your requirement*/
}
.wrapper img{
display: block;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1500">
</div>
I think you can do this with either an iframe, or using overflow: scroll with 100% width. It's the height you'd need to figure out. I would suggest using media queries maybe for the height.
Here's a sample jsfiddle that I think is pretty close to what you're looking for. Again, your height is what you have to figure out. The parent div will always take up the full height of the children unless you specify.
.image-wrapper {
width: 100%;
height: 50vh; /* as suggested below in another answer, or you can use media queries */
overflow: scroll;
}
<div class="image-wrapper">
<img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png">
</div>
https://jsfiddle.net/adpro/bt7aar4b/