عارض الصور طول باي مقاس

 

1

2

3

4

  الكود

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>

.container {

  display: -webkit-box;

  display: flex;

  width: 100%;

  padding: 4% 2%;

  box-sizing: border-box;

  height: 100vh;

}

.box {

  -webkit-box-flex: 1;

          flex: 1;

  overflow: hidden;

  -webkit-transition: .5s;

  transition: .5s;

  margin: 0 2%;

  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);

  line-height: 0;

}

.box > img {

  width: 200%;

  height: calc(100% - 10vh);

  -o-object-fit: cover;

     object-fit: cover;

  -webkit-transition: .5s;

  transition: .5s;

}

.box > span {

  font-size: 3.8vh;

  display: block;

  text-align: center;

  height: 10vh;

  line-height: 2.6;

}

.box:hover {

  -webkit-box-flex: 1;

          flex: 1 1 50%;

}

.box:hover > img {

  width: 100%;

  height: 100%;

}

</style>

<div class="container">

<div class="box">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC37hyphenhyphenwyFN22VtWdlnkdEhdHcsRQAzoYIB9oRW9w_h3-o85tdMeB8M6aaX10083tnd_urs5NFNQGPzROQY7rAOf9uWdoGEsHkbmcjRnnm76Tyeja3HeyBDH4aGQ3bkBfNFxCtqzjk2Mslb/s355/Kuwait_Glitter-Adobe_9.gif" width="246" height="255">

<span>1</span>

</div>

<div class="box">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExsSPU_RPDzKhthrrf3pLQtor3D-iruhyAyWUr7kLlKck4UsfnJkYuiCYnMqF__wXu82T4-wD1Y30jVE8Ch2WbL2s63Ee5tn7Lj0Evew8EKbIjTiaIlkIuMTtoQL6Gv0SZoV4RVLymc_E/s456/Kuwait_Glitter-Adobe_22.gif" width="247" height="272">

<span>2</span>

</div>

<div class="box">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2yZoTg7jaMYYDI0tcCBBFJl6zDGe741-HZ4msVaxBHWqQGakMinKva_owNiMDJruBkWyIWbhnryJjb3WohfFA2PsTUrEqef1yT1iclcEKr7Wi1Swves4hAMf9HcP0le9VkpRuXoXkh4y/s263/Kuwait_Glitter-Adobe_29.gif">

<span>3</span>

</div>

<div class="box">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4mz7jUJwb-igUWePfKmDY_NsFvkrf8ZvfsXDqE9RozpQ39alig-_Yl_WK6hihqY10xB3rG7KPV7bG2PLNoAdqxHx6aYaKJ0zWbTaAeJ_Nmf2iZTpAEwAgbZGoLeCFHxfkjoQhL7gPfbh/s618/Kuwait_Glitter-Adobe_5.gif" width="271" height="252">

<span>4</span>

</div>

</div>&nbsp;