Как настроить всплывающее окно на размер изображения?

У меня есть скрипт для всплывающего окна, который предназначен для отображения кликабельного изображения. Моя проблема заключается в том, что я должен регулировать размеры всплывающих окон каждый раз, когда я изменяю изображение. Существует ли способ автоматической настройки всплывающего окна в зависимости от размеров изображения?

всплывающий.РНР

<?php
/** popup code **/
echo "
<div id='pop1' class='simplePopup'>
    <div  id='main' class='row'>
        <div class='adimage' align='center'>
             <a href='localhost/test/test_target.php' target='_blank'><img src='images/logo.png'></a>
        </div>
    </div>
</div>";


?>

код CSS:

body {
 font-family: Arial;
 font-size:14px;
}

.simplePopup {
 display:none;
 position:fixed;
 border:4px solid #808080;
 background:#fff;
 z-index:3;
 padding:12px;
 width:50%;
 min-width:70%;
}


.simplePopupClose {
 float:right;
 cursor:pointer;
 margin-left:10px;
 margin-bottom:10px;
}


.simplePopupBackground {
 display:none;
 background:#000;
 position:fixed;
 height:100%;
 width:100%;
 top:0;
 left:0;
 z-index:1;
}

1 ответ

  1. Вы можете настроить изображение по ширине или по высоте. Если вы сделаете оба, вы будете искажать соотношение сторон (предполагая, что у вас есть изображения разных размеров).

    Например, чтобы сохранить фиксированную ширину, задайте ширину контейнера изображений. Вы можете использовать любой блок вы любите, например

    .adimage {
       width: 400px; 
    }
    

    Затем принудительно установите изображение в контейнер:

    .adimage img {
      width: 100%;
      height: auto;
    }
    

    Для последовательной высоты вы использовали бы

    .adimage {
       height: 400px;
    }
    
    .adimage {
      height: 100%;
      width: auto;
    }
    

    Если вам нужно выбрать внешние контейнеры, попробуйте задать им фиксированные размеры, а затем применить 100% ширину к внутренним контейнерам:

    .simplePopup {
     width: 50%;
    }
    
    .adimage {
      width: 100%;
    }
    
    .adimage img { 
      width: 100%;
      height: auto;
    }
    

    Если это не поможет, пожалуйста, добавьте скрипку в свой пост,и я присмотрюсь.