Question

这是我现在使用的代码：

（HTML）

<html>
  <head>
    <title>Float Image Gallery</title>
  </head>
  <body>
    <button onclick="showAllGalleries();">Show gallery</button>
    <div id="myGallery" class="gallery">
      <div class="gallery-close">
        <a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
      </div>
      <div class="gallery-content">
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" /><br>
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" /><br>
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" />
        <img class="gallery-content-image" src="" alt="Please add image here" /><br>
      </div>
    </div>
   </body>
</html>

（CSS）

.gallery {
  display:none;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
  top:auto;
  right:auto;
  position:fixed;
  background-color:#cccccc;
  opacity:50%;
}

.gallery-close {
  width:auto;
  height:auto;
  margin-top:10px;
  margin-left:10px;
}

.gallery-close-button {
  width:30px;
  height:30px;
}

.gallery-content {
  width:100%;
  height:auto;
  text-align:center; 
}

.gallery-content-image {
  width:20%;
  height:20%;
}

.gallery-content-image:hover {
  background-color:#ffffff;
}

（JS）

function showAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='inline';
  }
}

function hideAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='none';
  }
}

问题出在css（这里）：

.gallery-content-image {
  width:20%;
  height:20%;
}

如果不编辑其他部分，我可以将高度设为与宽度相同吗？有没有使用jQuery的解决方案？（Javascript好的）
任何帮助将不胜感激。

Answer 1

百分比单位是相对于浏览器窗口的，因此您将获得图像宽度的20％浏览器窗口宽度，以及图像高度的20％浏览器窗口高度。

因此，要使图像成为正方形，应将像素（或其他单位）中的值指定为相同。示例：width：100px;高度：100像素;

修改

保持css的图像宽度，宽度：20％;

这里是js代码：

window.onresize = function() { resize(); }; window.onload = function(){ resize(); }; function resize(){ var imgs = document.getElementsByTagName('img'); for(i = 0; i< imgs.length; i++){ document.getElementsByTagName('img')[i].style.height = document.getElementsByTagName('img')[i].clientWidth; } }

Answer 2

你可以使用：

adsArray[i].setAttribute("hieght","40%");
adsArray[i].setAttribute("width","40%");

设置图像高度=宽度（不是div）

2 个答案: