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

如果这没有用，请在帖子中添加小提琴，我会仔细看看。

如何调整弹出窗口到图像大小？

1 个答案: