Develop Reference

How to adjust the height for images with different heights [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed last year.
I want to put my photos according to the following plan:
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul > li {
width: 49%;
}
ul > li img {
width: 100%;
margin-block-end: 0.25rem;
}
<ul>
<li>
<img src="img/study-image-1.png" alt="">
</li>
<li>
<img src="img/study-img-3.png" alt="">
</li>
<li>
<img src="img/study-img-2.png" alt="">
</li>
<li>
<img src="img/study-img-4.png" alt="">
</li>
</ul>
But when I did my design based on the following code, it was like this.
Thank you in advance for your cooperation

Do you want something like this?, you don´t need javascript
https://codepen.io/marcosefrem/pen/KKXELPy
<ul>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
</ul>
<style>
ul {
column-count: 3;
column-gap: 1.25rem;
}
li {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
li img {width:100%; object-fit:cover}
</style>

For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:
ul {
columns: 2;
width: 50vw;
font-size: 4px;
}
li img {
width: 100%;
height: auto;
margin: 2px 0 2px 0;
}
<ul>
<li><img src="https://picsum.photos/id/1016/100/50"></li>
<li><img src="https://picsum.photos/id/1015/200/300"></li>
<li><img src="https://picsum.photos/id/1016/200/300"></li>
<li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>
Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.

Also can use from divs instead ul and li:
.container {
width: 300px;
grid-template-rows: 100px 100px 100px;
display: grid;
grid-template-areas: 'one tow' 'tree tow' 'tree four';
grid-gap: 10px;
}
img {
width: 100%;
height: 100%;
margin-block-end: 0.25rem;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: tow;
}
.item3 {
grid-area: tree;
}
.item4 {
grid-area: four;
}
<div class="container">
<div class="item1">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
</div>
<div class="item2">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
</div>
<div class="item3">
<img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
</div>
<div class="item4">
<img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
</div>
</div>

Thumbnail grid is displayed in a column

I'm trying to create a grid of several thumbnail images but I have the same problem, which is that my images are in columns. Indeed, I have one image per line, whereas I want as many as possible.
Here is an example of what I want to achieve:
https://codepen.io/pjhooker/pen/lFuDK
<div>
<ul>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
</ul>
</div
The problem is that even with this code my images remain in columns underneath each other
Here's what I have in my code:
<template>
<div>
<div>
<div class="hex-row even">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
<div class="hex-row">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
<div class="hex-row even">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
</div>
<div style="margin-top: 300px;">
<ul>
<li v-for="img in images" v-bind:key=img>
<v-img max-width="48px" max-height="48px" v-bind:src=img />
</li>
</ul>
</div>
</div>
</template>
<style scoped>
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
ul {
list-style: none;
}
li img {
float: left;
margin: 10px;
border: 5px solid #fff;
transition: all .3s ease;
}
</style>
<script>
import Hexagon from './Hexagon'
export default {
data: () => ({
images : [url, url, url...]
}),
components: {
Hexagon,
}
}
</script>
With the code above, I have images of 48px * 48px that are arranged one below the other.
I want the images to be next to each other. As soon as there is no more space on the line, the sequence continues on the next line

You should add a display:flex; flex-wrap:wrap to the parent container
Here is a similar pen using div elements instead of li
https://codepen.io/chrismclarke/pen/ExYZxbG

Apply following code in your CSS.
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

How to create horizontal scroll bar for a div

I have the following items.
left arrow slide1 slide2 slide3 slide4 slide5... right arrow
I want to be able to have horizontal scroll bar in my div.
I have something like this
<section id='slide-container'>
<div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
<ul id='slide-list'>
<li><img src='images/slide1.png' /></li>
<li><img src='images/slide2.png' /></li>
<li><img src='images/slide3.png' /></li>
<li><img src='images/slide4.png' /></li>
<li><img src='images/slide5.png' /></li>
<li><img src='images/slide1.png' /></li>
<li><img src='images/slide2.png' /></li>
<li><img src='images/slide3.png' /></li>
<li><img src='images/slide4.png' /></li>
<li><img src='images/slide5.png' /></li>
</ul>
</section>
css
#slide-container{
width: 970px;
height: 190px;
line-height: 190px;
border:solid 1px #EEEEEE;
position: relative;
overflow: scroll;
}
I can only see the vertical scroll bar and my slides are vertically aligned. I was hoping someone here can help me to keep my slides aligned horizontally and show a scroll bar for it.
My brain is fried...
Thanks a lot!

To #slide-container add white-space: nowrap; overflow: auto;.
For #slide-list li add display: inline-block;.

Please replace your style with this
#slide-container{
width: 970px;
height: 190px;
line-height: 190px;
border:solid 1px #EEEEEE;
position: relative;
overflow-y:hidden;
overflow-x: scroll;
display:block;
}
#slide-list
{
width:1500px; /*i put this for see the scrolling/*
}

jQuery submenu position bug

I`m trying to create menu which is opening on clicking parent element and closeing on mouseleave from that one which was opened a while ago. It should work from left to right
Here is
<ul class="menuFirst">
<li><img src="img/ico1.png"></li>
<ul class="">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
</ul>
Here is CSS
ul.menuFirst{
list-style-type: none;
border-top: #AAA solid 3px;
border-right: #AAA solid 3px;
border-bottom: #AAA solid 2px;
position: absolute;
left: 0px;
top: 70px;}
ul.menuFirst li{
background: #DDD;
border-bottom: #AAA solid 1px;
}
ul.menuFirst li img{
margin:5px;
}
ul.menuFirst ul{
display: none;
}
ul.menuFirst ul.menuSecond {
list-style: none;
display: table;
position: absolute;
left: 30px;
}
ul.menuFirst ul.menuSecond li{
display: table-cell;
}
And here is jQuery
<script>
$(document).ready(function(){
$("ul.menuFirst li").click(function(){
$(this).next().toggle();
var ypos= $(this).next().position();
alert(ypos.top);
$(this).next().css('top','-=38');
$('ul.menuFirst ul.menuSecond').one('mouseleave',function(){
$(this).css('top', '+=38').toggle();
});
});
});
It works for 1st element but it's pretty buggy. When I'm trying to add .animate() It just didn't work. So I`ve decided to take step back and unbug this one but i don't know how. It should looks like this:

Your HTML is not correct use this
<ul class="menuFirst">
<li><img src="img/ico1.png">
<ul class="">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
</ul>

Ok, I`ve fix it....
$('ul.menuFirst ul').each(function(){
$(this).css('top', '-=38').hide();
});
This is executing where DOM is ready I don't need to change position each time while I`m opening or closeing it.
$("ul.menuFirst li").click(function(){
$(this).next().toggle("slide",
{direction: "left"})
});
$('ul.menuFirst ul.menuSecond').mouseleave(function(){
$(this).hide("slide",
{direction: "left"});
Nextly I`m ussing this to animate it.

How to make combination of images responsive in twitter bootstrap?

I want the above five different images joined as this is header part of a webpage.
I used the lavalamp plugin and it works, but the webpage loses its responsiveness. On different devices, the header is not displayed in one line.
I tried to insert it in bootstrap. I inserted the lines of code of lavalamp CSS in bootstrap CSS file, shown here:
.lavaLampWithImage {
margin-top:10px;
position: relative;
height: 55px;
/* width: 734px;*/
/*width:780px;*/
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("res/arrow.png") no-repeat right -30px;
z-index: 0;
padding-top:59px;
padding-left:40px;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("res/arrow.png") no-repeat top left;
height: 30px;
}
.lavaLampWithImage li a {
z-index: 20;
display: block;
float: left;
position: relative;
overflow: hidden;
}
.mm {
border:0px;
}
#navbar {
/*margin-left:152px;*/
/*padding-top:60px;*/
padding-top:1px;
/*width:727px;*/
}
And the relevant HTML code part is as follows:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="1">
<li><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li class="current"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li>
<li><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></li>
<li><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
How to make it responsive?
Please reply as early as possible.
Thanks in advance.

First remove specific width and height from your image tag like bellow :
<li><img class="mm" src="res/Home-n.png" alt="home" onClick="location.href='index.html'"/></li>
Then write in css :
#media only screen and (max-width:720px){
.lavaLampWithImage li img {
max-width:100%;
}
}
and give a specific width of li element in percentage in this media query.

I am not 100% sure what you mean with responsive images. But if you just want to resize the images according to the screen width, you could try something like this:
.lavaLampWithImage {
margin:10px 0 0;
padding:0;
display:block;
position: relative;
width:100%;
}
.lavaLampWithImage li {
display:inline-block;
list-style: none;
background-color:green;
width:15.38%;
}
.lavaLampWithImage li:first-child {
width:38.45%;
}
.lavaLampWithImage li a, .lavaLampWithImage li a img {
display:block;
width:100%;
}
and the html:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="nav1">
<li><img class="mm" src="http://www.upsdell.com/BrowserNews/img/ban_300x60.png" alt="home" onClick="location.href='index.html'"/></li><li class="current"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="home" onClick="location.href='index.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="about us" onClick="location.href='help.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
here is a jsfiddle