Вопрос

This is the code I am using now :

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

The problem is at the css (here):

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

If not to edit other parts, can I make the height same as width?
Is there a solution using no jQuery? (Javascript Okay)
Any help will be appreciated.

Это было полезно?

Решение

The percentage unit is relative to your browser window, so you will get 20% of the browser window width for the image width, and 20% of the browser window height for the image height.

So to make the image a square, you should specify the values in pixel (or other units) to be the same. Example: width:100px; height:100px;

Edit

Keep the css for the width of image, so width: 20%;

Here's the js code:

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

Другие советы

you can use :

adsArray[i].setAttribute("hieght","40%");
adsArray[i].setAttribute("width","40%");
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top