All the images have one thing in common; they are all 300 or 600 pixels wide. But the heights vary from around 300-900 pixels. Now I need a small group of the images which will be used to suggest other images for the user. These will only be around 100x200 pixels(might change). My previous attempt has made the images shrink into the 100x200 aspect ratio. I need it to overlap, but the excess is hidden.
Try something like this http://dabblet.com/gist/2769112
The CSS you will need is simply
.img-container {
width: 200px; /* whatever set width */
height: 100px;
display: inline-block; /* or you could float them */
overflow: hidden;
}
.img-container img {
width: 100%;
}
Put the images in a wrapping element, such as a DIV, with a defined height and width and use overflow:hidden.
Related
somehow my image is not scaling down or up at all. I have seen many things on the internet but I could not solve it. W3schools told me to make it like this, with the formular-banner image.
.formular-banner
{
max-width: 100%;
height: auto;
}
<div class="formular-banner">
<img src="koala.jpeg">
</div>
First of all, you are defining settings for the parent element of the image, not for the image itself. So you can't expect that to have an effect on the image...
For the image itself, you also shouldn't use those settings, but instead of max-width: 100% (to make it the full width of the container), you should use width: 100%, plus a max-width that has the original width of the image in pixels, in order not to make it any bigger (i.e. distorted) than the original image in case it's smaller (i.e. less wide) than the container.
So your CSS rule would be
.formular-banner > img {
width: 100%;
max-width: 1240px; /* use the actual width of your image here */
height: auto;
}
If the image is smaller than the container (which, as a div = block element) will have 100% width by default) and you want it to be centered, you can add this rule (for the container) which will horizontally center the image (as an inline element) inside the container:
.formular-banner {
text-align: center;
}
Looking for a technique for controlling an tag's aspect ratio. aspect-ratio property isn't supported enough for use at the time of this post.
Generally I would wrap the element in a a container and apply a padding top to create the effect needed. However, the content this I have is inline with other content and I can't touch the html.
The container width that the image is responsive so enforcing height and width directly isn't an option.
For example having an image keep 16:9 ratio within a container. It doesn't matter about the visual scale of the image. I will get the image to adjust with
object-fit: cover
Is there a current technique that would work on just the img tag itself?
It is an aspect ratio problem. Unfortunately CSS on img tag to use the aspect-ratio technique needs a div container. I had a similar problem that I solved using css as soon as:
.img {
display: table-cell;
max-width: ...;
max-height: ...;
width: 100%;
}
Since you can't use the padding tweak, I assume that you can't use javascript either.
If you are only able to work on the img tag, the only solution I'd see that would be close to what you aim to achieve would be :
.yourImage {
width : 100%;
height: 100%;
object-fit: contain;
}
https://caniuse.com/#search=object-fit
You could decide width based on the viweport, as
.theImage {
width: 20vh;
height: auto;
}
or some other variation of it.
I'm having some difficulty understanding the different image size configurations in Flexbox. It seems like I get a different result every time I try to apply them.
Instead of saying "it all depends on the situation", can someone explain the following with some coherent logic stringing through these different scenarios? I would like to know why the results are different each time. I'm not too concerned about the ratio of the images, but more so about the locations of the images depending on the viewport size. Let's say I use object-fit: cover for all scenarios. Here's an example that puts two images side by side.
index.html
<section>
<figure>
<img src="profile image1.jpg" alt="">
</figure>
<figure>
<img src="profile image2.jpg" alt="">
</figure>
</section>
style.css
section {
display: flex;
}
Scenario 1
style.css
/* figure wrapper's dimension is set, but not those of the images */
figure {
flex: 50%;
width: 100%;
height: auto;
}
Scenario 2
style.css
/* figure wrapper's dimension and the images' dimension are both set with a percentage unit */
figure {
flex: 50%;
width: 100%;
height: auto;
}
img {
width: 100%;
height: 100%;
}
Scenario 3
style.css
/* figure wrapper's dimension and the images' dimension are both set with the pixel unit */
figure {
flex: 50%;
width: 400px;
height: 400px;
}
img {
width: 400px;
height: 400px;
}
Scenario 4
style.css
/* figure's dimension is set with max-width and max-height */
figure {
flex: 50%;
max-width: 400px;
max-height: 400px;
}
img {
width: 100%;
height: 100%;
}
Senario 5
style.css
/* figure's dimension and image's dimension are set with max-width and max-height */
figure {
flex: 50%;
max-width: 400px;
max-height: 400px;
}
img {
max-width: 100%;
max-height: 100%;
}
I guess I'm ultimately trying to figure out what the benefit of putting the image in a container with different configurations of pixel/percentage dimension unit.
Not setting image width (scenario #1), the image will use its
original width and height, meaning if, for example, you are using an image having 1024*768 dimension, it fills 1024 px of your page width and 768px of your page height. This behavior will ignore whatever
the configuration you have used for its wrapper i.e. figure.
Having set the img width 100%, meaning you've forced the element to adhere to the width of its container (in this case figure). So, in this case, the flex configurations come into effect.
In scenario#2 you have set the width of flex item (i.e. figure) to 100% of its container (i.e. section). But it sets the initial width of the figure! meaning unless you haven't set the flex-shrink to 0, the figure will be shrunk to fulfill the specifications of Flexbox.
Flexbox specification says while flex-wrap is nowrap which is the default behavior, the width of the container will be assigned equally to the items. As you have two items here (two figures), the width of each will be shrunk to 50% of its container (i.e. section).
The result is obvious now. The image will be shrunk to 100% of its container which in turn have 50% of its container and you will see two images beside each other.
When you set width: 400px for figure element which in place is a flex item, It's somehow ignored by the browser and is replaced by the browser calculated width. flex-shrink, flex-grow are two of them. When you say flex: 50%, you have not changed flex-grow and flex-shrink default values (i.e. 1) allowing the browser to shrink the items to position them in one line (as flex-wrap: nowrap says to do that!)
As a result, in scenario#3 which the flex-basis is 50%, the specified width will be ignored and the base width of the element will be 50% of its container. But of course, they will be shrunk so that the final width will be something that allows figure items to be beside each other and img tags adhere the width of their container and cover them (will be resized to fill them)
In scenario#4 and #5, you have set the max-width of figure item. Doing such will cut the calculated width of browser meaning it will overwrite everything the browser calculated using the above rules. It does not matter whether you have specified the width using px or percent If the browser calculated width is greater than the specified max-width, the final width will be changed to max-width.
Scenario 1
The images use their natural size. If they are smaller than the flexboxes, they are aligned to the left or their respective flexbox like text, forming two columns. If they are bigger, they overflow. I would therefore advise against this.
flex: 50% is a shorthand for flex-basis: 50%; flex-grow: 1; flex-shrink: 1. The figures have both a flex-basis and a width, which is useless. Only the flex-basis will be considered. Therefore, the algorithm will first create the figures at 50% of the width of their parent, then either grow them or shrink them evenly to fit said parent. As I said before, the images will overflow regardless if they are too big.
Scenario 2
Just like in Scenario 1, the width: 100% on the figure is useless.
Giving the images both a height and width will make them stretch to fill their parent. I do not know the exact algorithm which determines their size in this case because I never do that. I'd recommend only setting width in this case, so the height of the image is automatically chosen to respect the aspect ratio.
Scenario 3
The width and height of 400px on the figure is ignored because flex: 50% set the flex-basis which has priority.
The image is stretched to be exactly 400px by 400px, which might cause it to overflow horizontally.
Scenario 4
The figures are told they cannot grow beyond 400px, so if 50% of their parent is bigger than that, they will be of 400px wide. Being given no set height, and since their children have a relative height of 100%, their height is set to their max-height of 400px. If someone knows a better explanation of this behavior, please share in the comments.
The images are stretched to fill the flexbox entirely, losing their original aspect ratio.
Scenario 5
The figures behave just like in scenario 4.
The images keep their original size EXCEPT if they are wider than their parent figures, in which case they are shrunk down. Since both max-width and max-height are set, the images may lose their original aspect ratio in the process.
Another recommendation
You don't need to make the figures grow at all. This can be desirable if you want to style them and add legends to your images. Example:
section {
display: flex;
}
figure {
background-color: #dca;
padding: 20px;
}
img {
max-width: 100%;
}
<!-- PS: the width and height attributes on img tags emulate actual image size -->
<section>
<figure>
<img width="200" height="100" alt="">
<legend>Fig. 1</legend>
</figure>
<figure>
<img width="400" height="100" alt="">
<legend>Fig. 2</legend>
</figure>
</section>
The default flex-styles for any element are:
flex-grow: 0; /* do not grow */
flex-shrink: 1; /* shrink automatically to fit parent */
flex-basis: auto; /* but otherwise determine size based on content */
Then again, you might want elements to fit into columns neatly, in which case a flex: 50% on a wrapper around the figure elements might be better. In any case, it always helps to add background colors to elements when testing things out!
I need help making my image take up no width on the HTML. What I mean by this is when you shrink the width size of the window, I don't want the image affecting the horizontal slider. I would think overflow:hidden; would work but the right side of the image takes up space on the HTML document.
You could add max-width: 100% to the img element. In doing so, the img will never take up more than 100% of the width of the parent element.
img {
max-width: 100%;
}
Alternatively, you could also use max-width: 100vw (which is 100% of the browser width's width).
img {
max-width: 100vw;
}
Use a width: 50%; instead of px. Play around with which % value best corresponds to your image width. That way the image will automatically adjust to the browser windows size.
How can I prevent my squares from wrapping when resizing the window?
I want the squares to stay at their positions, but every time I resize the window, they get pushed down and are hidden.
This example is currently working, but the solution, which makes this possible, is just ridiculous.
Is there a "cleaner" way or how can I make it look more professional?
My JSFiddle Example
.content {
width: 100000000px;
}
Remove position:absolute and overflow:hidden from the parent element.
Since the elements are inline-block, you could use white-space:nowrap to prevent them from wrapping. If that's not the desired effect, just remove it though.
jsFiddle example
#container {
width: 100%;
height: 100px;
white-space:nowrap;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
}
http://jsfiddle.net/CLErY/2/
/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}
.content should have at least the size of the whole element plus the size of one children (100px), so 200% is the double and it should work.
In case we have 4 squares the size should be (width x 4 + width) in case the width of the square is 100 the result is 500px.
Also this is to give a smoother overflow dissapear but not necesary.
Hope it helps.