Question

我有一個用於顯示可點擊圖片的彈出窗口的腳本。我的問題是我必須在每次更改圖像時調整彈出尺寸。彈出窗口可以根據圖像尺寸自動調整嗎？

popup.php

<?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; 
} 

Answer 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; 
} 

如果這沒有幫助，請在你的文章中添加一個小提琴，我會仔細看看。