In the div for storing pictures, pictures are written in this way:

 <img src="images/2.png" width="250" height="140" />

There are many such pictures in the div . They are all different sizes and can be dragged into another div .

How can you make them the same size, while they are in a div for storage, and when they are dragged to another div , so that they take their real size.

The code will be

  <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Π—Π°ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° чистом CSS</title> <link rel='stylesheet' href='css/style.css'> <style> .tabs { position: relative; min-height: 200px; /* This part sucks */ clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; overflow: hidden; } .content > * { opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } [type=radio]:checked ~ label ~ .content > * { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } </style> </head> <body> <div id="page-wrap"> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° β„–1</label> <div class="content"> <p>Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ β„–1</p> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° β„–2</label> <div class="content"> <div class="dropp"> <div id="element1" class="img"><div class="delete"></div><img src="img/1.png" /><div class="resaze"></div></div> <div id="element2" class="img"><div class="delete"></div><img src="img/2.png" width="250" height="140" /><div class="resaze"></div></div> <div id="element3" class="img"><div class="delete"></div><img src="img/3.png" width="249" height="31" /><div class="resaze"></div></div> <div id="element4" class="img"><div class="delete"></div><img src="img/4.png" width="250" height="143" /><div class="resaze"></div></div> <div id="element5" class="img"><div class="delete"></div><img src="img/5.png" width="551" height="245" /><div class="resaze"></div></div> <div id="element6" class="img"><div class="delete"></div><img src="img/6.png" width="250" height="140" /><div class="resaze"></div></div> <div id="element7" class="img"><div class="delete"></div><img src="img/7.png" width="94" height="19" /><div class="resaze"></div></div> <div id="element8" class="img"><div class="delete"></div><img src="img/8.png" width="151" height="19" /><div class="resaze"></div></div> <div id="element9" class="img"><div class="delete"></div><img src="img/9.png" width="112" height="19" /><div class="resaze"></div></div> <div id="element10" class="img"><div class="delete"></div><img src="img/10.png" width="169" height="19" /><div class="resaze"></div></div> <div id="element11" class="img"><div class="delete"></div><img src="img/11.png" width="81" height="31" /><div class="resaze"></div></div> <div id="element12" class="img"><div class="delete"></div><img src="img/12.png" width="171" height="164" /><div class="resaze"></div></div> <div id="element13" class="img"><div class="delete"></div><img src="img/13.png" width="171" height="165" /><div class="resaze"></div></div> <div id="element14" class="img"><div class="delete"></div><img src="img/14.png" width="22" height="150" /><div class="resaze"></div></div> <div id="element15" class="img"><div class="delete"></div><img src="img/15.png" width="100" height="32" /><div class="resaze"></div></div> <div id="element16" class="img"><div class="delete"></div><img src="img/16.png" width="100" height="32" /><div class="resaze"></div></div> <div id="element17" class="img"><div class="delete"></div><img src="img/17.png" width="100" height="31" /><div class="resaze"></div></div> <div id="element18" class="img"><div class="delete"></div><img src="img/18.png" width="100" height="31" /><div class="resaze"></div></div> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° β„–3</label> <div class="content"> <p>Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ β„–3</p> <img src="http://placedog.com/200/100"> </div> </div> </div> </body> </html>

    1 answer 1

    If you have two div , you can do this. In the html-code write:

     <div id="storage"> ... <img src="images/2.png"> ... </div> <div id="view"> ... <img src="images/2.png"> ... </div>

    Write two classes in CSS:

     #storage img{ width:250px; height:140px; } #view img{ width:500px; height:280px; }

    In this example, the storage class describes the div storage, and the view class describes another div . Both classes indicate the size of the images, not the container div . The size of the pictures you specify required.

    PS: in CSS between the name of the class and the img tag you definitely need a space. ( #storage img ).

    PPS: I understand your question correctly?

    • @dmivasant I do not understand something. Why do you need a different size in storage? Just make them the same height in proportion to the actual size, and that's it! For example, for pictures in the "dropp" : .dropp img {height: 150px; } and for the diva you write: .class_diva img {height: 100%; } - intro94