I'm trying to display a row of images using pure CSS, where the result would be that all images have the same height. For example, a taller image would shrink if it was next to a smaller image. There can be 2-6 images in a row. Given a 9:16 image and a 16:9 image, the result would ideally look something like this:
I initially tried to use Flexbox, but the column widths don't change - the image inside just scales to fit inside. I thought CSS Grid might work instead, but I can't get that working either.
Here's the HTML:
<p class="side-by-side-images">
<img src=""> // Tall image
<img src=""> // wide image
</p>
The current CSS Grid implementation:
.side-by-side-images {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit);
grid-column-gap: 5px;
}
img {
width: 100%;
}
The current result:
Expanding from jons' answer:
You can set your fixed height (the height you want for all of your images, regardless of width) in the image container:
.image-container {
display:flex;
height:200px;
background:gray;
}
And set the height of all images to that of its container:
.image-container img {
width:auto;
height:100%;
}
Result:
view on codepen
Alternatively, including the gaps as shown in your image: view on codepen
I would just do
img {
height: 300px; // or whatever value you want
width: auto;
}
.container {
display: flex;
flex-wrap: wrap;
}
If you know the sizes of the images, the math could be more specific.
Related
I placed media object inside bootstrap's column. If I put <pre><code>...<code></pre> with long strings of code into .media-body, whole media object goes outside column's borders.
Here's fiddle: https://jsfiddle.net/crazypilot/8dyq4v7x/16/
Help me, please!
UPD: I want to have horizontal scroll on that <pre><code>...<code></pre>, so .media will not overflow on the column's width.
Try this:
.media-body {
width: calc(100% - 40px);
}
40px = width of image.
Better approach:
.media {
flex-direction: column;
}
.media-body {
width: 100%;
}
Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
The problem is simple:
The main part of my page is a square that should be shown at the center of the screen in all screen sizes and orientations
The square should use the screen efficiently and be as big as possible without the need to scroll
No scrollbars, no fixed sizing, no overflow-hidden, no Javascript.
Flexbox is encouraged.
This is how the page should look like in a landscape or portrait browser:
Here is a CodePen as a starting point.
<div class="body">
<div class="square">
Square
</div>
</div>
Here's my attempt to achieve the end goal.
The key point is to use vmin viewport percentage length for both width and height properties of the square box:
Example Here
.body, .square {
display: flex;
align-items: center;
justify-content: center;
}
.body {
min-height: 100vh;
}
.square {
width: 100vmin;
height: 100vmin;
}
(vendor prefixes omitted for brevity, check the "Compiled View" in the demo).
Could someone please help me?
I have three divs.
enter code here
The one in the middle should always be 1040px.
The left and right one shall fill the whole left space.
How can I make them proportionally grow/shrink when I resize the window?
Here is the code:
http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d
Thank you very much in advance!
Here is a pure CSS option using CSS display properties of table and table-cell.
DEMO: http://jsfiddle.net/audetwebdesign/a9J7D/
The markup is the same as you proposed.
The CSS is:
.container {
width: 100%;
min-width: 540px; /* you may want this... */
margin: 0 auto;
outline: 1px dashed blue;
display: table;
}
.bar-light {
width: auto;
height: 52px;
background-color: blue;
display: table-cell;
}
.bar-dark {
width: 540px;
height: 52px;
background-color: red;
display: table-cell;
}
Set display: table to .container and for the child elements, display: table-cell.
For .bar-light, set the width to auto and they will be computed to fill in the remainder of the page width (equally).
In my example, I set the center width to 540px to make it easier to see in the fiddle.
Finally, add a min-width to .container, without any content, the table cells will collapse to zero width as you shrink the window size.
Note About Heights
This layout will create three columns of equal height, the height will be computed to enclose the tallest of the three child elements.
This is real quick so it might be slightly off but you should be able to get the idea
HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
CSS
div { float: left;}
.b { width: 1040px;}
JQuery
$(document).onload(resize);
$(window).resize(resize);
function resize() {
var ww = $(window).width();
var width = (ww-1040)/2;
$('.a').width(width);
$('.b').width(width);
}
Add a table with 3 column. In the middle column add you div. specify the size you want for this for these column e.g. 10-80-10. or -80-.
I have some photos which have big sizes, I would like to set them to the Parent's dimension size. If one time the parent dimension is 1200x800, I would like to set the photo dimensions to 1200x800, but also I would like to see the whole image. If my parent dimension is 500x300, I would like the image to be 500x300 and so on.
Is this even possible? I want to shrink the image or expand it according to it's parent's dimension.
Thanks!
The css property that you want is max-width :
Css
img {
max-width:100%;
}
You could add a container around your image and set overflow:hidden to prevent images to get bigger than the defined width/height.
Use this bit of css to scale your image:
img {
max-width: 100%;
max-height: 100%;
}
I might be naive, but isn't this as simple as this ?
img {
width:100%;
height:100%;
}
Try this in the image tag
<img src="url.jpg" width="100%" height="100%" />
Or set the backgound of the element as the image and do the same.
In general it might help to remember this:
1: A track is not a container.
2: A grid area is not a container.
3: A nested element is not a container unless you declare it as such.
Declarations such as max-width: 100%, object-fit: contain and so on describe how the element (e.g img) will behave inside its container - not inside the track or area it happens to have been placed in. And not inside the tag it lives in, nested inside its container. e.g after
HTML:
<div class="myContainer">
<div class="myTopRow">
<img src="myPic.jpg">
</div>
<div class="myBottomRow">
<span class="mySubText">Your subtext here.</span>
</div>
</div>
CSS:
.myContainer {
display: grid;
grid-template-rows: [row1Start] 1fr [row1End row2Start] 1fr [row2End];
grid-template-columns: [col1Start] 1fr [col1End];
}
.myTopRow {
grid-rows: row1Start / row1End;
grid-columns: col1Start / col1End;
}
.myBottomRow {
grid-rows: row2Start / row2End;
grid-columns: col1Start / col2End;
}
.myTopRow img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
you've made a grid consisting of one column and two rows. The image in the top row will seem to spill over into the second row, colliding with that row's spanned text. In reality there's no overflow - the image is not contained by the top row (which has not been declared as a container, but is "merely" an area spanning tracks). Within it's actual container (the whole two-row box) the image is perfectly contained.
In the case the image is bigger than the parent container you have to set :
img {
max-width: 100%;
}
If your image is smaller you have to set instead
img {
min-width: 100%;
}
otherwise it will just stay at its original width and height.(the Height is set to auto by default)
try to use the max-width property, this might give a bug in earlier versions IE though
#custom img {
max-width: 100%;
max-height: 100%;
}
width: inherit;
height: inherit;
object-fit: contain;