How to make this block adaptive?

How to make a similar block of adaptive?

ebaeac6cee9f4000ab0390418f2d2fe8.png

Mark up is no problem. And using flexbox, and through the float, and using position: absolute. But how to adequately adapt, that would not have been kicked out and all that.

UPD: Probably I not correctly understood, or God knows. Adaptability is not horizontal and vertical. And the solution I've written, so the question is CLOSED :)

I also want to filter it using mixItUp.
July 4th 19 at 23:37
6 answers
July 4th 19 at 23:39
Solution
In General, decided that the container set the height 50vw (i.e., the height of the container is adapted to the width of the screen), and the blocks with a percentage height.
July 4th 19 at 23:41
If we impose no problems what are the problems with adaptability? Or sizes change gradually, or the number of columns.
The problem is that here the height of the blocks percentage to specify not work (apparently this is my problem), only in pixels. Because during the adaptation at certain points, the blocks will sometimes bulge. I want to do agility that is proportional, not just the width 25% and decreases the height of every 200 to 300 pixels of screen width. Can tell me how? - jordy_Zemlak73 commented on July 4th 19 at 23:44
: I see you have a 4D block-column in which images are to each other. I'd decided to just decrease the number of block columns when you reduce the screen i.e. the smaller the screen the less of column-blocks horizontally. Type 4-3-2-1. - jarrell_Boe commented on July 4th 19 at 23:47
: I understand that. I'm about resize. My monitor is 1300px. All the rules. I'm starting to resize, and I have units moving out, because they have a fixed size, and normally look like they will be the width of the 1200, since I will register in media queries. But the time from 1300 to 1200 blocks will bulge because the size is not a percentage and fixed values. I need PROPORTIONAL adaptability) - jordy_Zemlak73 commented on July 4th 19 at 23:50
: Depends on how you have it done. You said that everything is simple to make, but as for me, there is just a problem to mark up and not the adaptability to add. Typically, such layouts using plugins like masonry, because in CSS there is no simple way the layout done.

You can try that .cont {columns: 25% 4} but it can crookedly work. - Mustafa.Tromp56 commented on July 4th 19 at 23:53
: Ah, understood. Well then, make the image very large, and the size of the unit they will be matched with max-width:100%; . At least this method was described in the book, markota I. "Responsive web design". Of course performance will drop. - jarrell_Boe commented on July 4th 19 at 23:56
: I laid out through
display: flex;
flex-wrap: wrap;
flex-direction: column;
for the container, and a fixed height for child elements whose sum must be the same (i.e. in the first column the sum of the heights of the blocks should correspond to the sum of heights of elements of the second column (and all the others as well)). - jordy_Zemlak73 commented on July 4th 19 at 23:59
: somehow it does not work) I Can something not so understood. Did the original image size 700x800 (two times more than necessary).
Code written like this:
.portfolio-elem{
 width: 25%;
img{
 display: block;
 max-width: 100%;
 height: auto;
}
}

Right? - jordy_Zemlak73 commented on July 5th 19 at 00:02
: I unfortunately read this book two years ago, will not say exactly, but I remember that Ethan was doing adaptive image it is through this chip.He also did examples of full rubber site through the interest which it was calculated using the ratio of the sides of the blocks. You can throw the book on the sharing and send the link on mail if you're interested, here warez to punish probably can. - jarrell_Boe commented on July 5th 19 at 00:05
so the book I downloaded, the benefit of the Internet know how to use) Thanks for the source - jordy_Zemlak73 commented on July 5th 19 at 00:08
Height cannot be set, because the symbols have width to stretch. You can set the image through the background and set background-size:cover - Mustafa.Tromp56 commented on July 5th 19 at 00:11
: well I just adaptive height is needed. With the width I can handle without problems. - jordy_Zemlak73 commented on July 5th 19 at 00:14
July 4th 19 at 23:43
So, set your pictures for a start
img{width:100%; max-width: real size of the image; height: auto;}
well and with the adaptability to a certain screen size, change these values with a very small extension recompose the blocks. In short there's nothing complicated here.
And what can I do with this code? Your example assumes that the images correspond exactly to the desired size. If I put height: auto, the picture will not be higher than your original size. - jordy_Zemlak73 commented on July 4th 19 at 23:46
July 4th 19 at 23:45
One of the most popular libraries for this kind of task is masonry.
It can help to make the structure as close as possible to that which you showed, but even there can be protruding pieces.
I know about this library, but there is a desire to implement it without using it, especially if it has all the chances. - jordy_Zemlak73 commented on July 4th 19 at 23:48
July 4th 19 at 23:47
specify picture background blocks. can using style="" directly. and you'll be nice to adapt
I will not be nice to adjust the height of these blocks, because I can ask can't. Width is no problem. - jordy_Zemlak73 commented on July 4th 19 at 23:50
: well height manually via media ask for different screens - jarrell_Boe commented on July 4th 19 at 23:53
: As I have already described above: "I'm about resize. My monitor is 1300px. All the rules. I'm starting to resize, and I have units moving out, because they have a fixed size, and normally look like they will be the width of the 1200, since I will register in media queries. But the time from 1300 to 1200 blocks will bulge because the size is not a percentage and fixed values. I need PROPORTIONAL adaptability)". And I have already done, but still now problems with the sorting. - jordy_Zemlak73 commented on July 4th 19 at 23:56
: well, maybe put bootstrap and deli them through col-sm-3 for example. get padding left and right of the blocks bootsrap - Mustafa.Tromp56 commented on July 4th 19 at 23:59
: Yes, the sense of bootstrap, if I have my own grid. I'm about the height of the blocks, not the width. Adaptive HEIGHT. Ie screen width 1200px height of the container is 700px and width 1150, height 691px. (this is not specific numbers, I explain). And I decided the height of the container in 50vw. Just sorting with the mixItUp I have not yet solved the problem. But this is different. - jarrell_Boe commented on July 5th 19 at 00:02
July 4th 19 at 23:49
There is a decision easier pomoshu column-count.
.image-grid {
 column-count: 4;
 column-gap: 0;
}

.image-item {
 display: inline-block;
}

.image-item img{
 width: 100%;
}

@media screen and (max-width: 480px) {
 .image-grid {
 column-count: 1 !important;
}
}

@media screen and (max-width: 960px) {
 .image-grid {
 column-count: 2;
}
}
Initially I probably put it wrong. See question (updated). But thanks for the effort - jordy_Zemlak73 commented on July 4th 19 at 23:52
!important to use a dreadful bad manners. Then can cause confusion when modifying. - jarrell_Boe commented on July 4th 19 at 23:55
: + - jordy_Zemlak73 commented on July 4th 19 at 23:58

Find more questions by tags CSSHTMLJavaScript