在图像上划分全尺寸

Question

我试图将一个div全尺寸的图像放在它上面（就像一个叠加层）。 我无法设置图像的宽度或高度，因为我想保持原始图像的宽高比。 例如：

原始图片：

顶部覆盖：

编辑：

我可以使用：在标签之前或者只是在图像中添加 filter：brightness（）属性，将黑色叠加层设置在顶部。但是，我不知道如何制作一个div，所以我可以把文字和按钮放在里面等等。

Answer 1

创建动态元素'img'并获取图像宽度和高度：

如果需要香草 javascript ：

   var newimg=document.createElement('img');
   newimg.setAttribute('src','https://i.stack.imgur.com/FFFir.jpg');
   newimg.onload = function(){
     var width = newimg.clientWidth;
     var height = newimg.clientHeight;
     newimg.remove();
     alert([width, height]);
      /* some more code */
   }

   document.body.appendChild(newimg);

如果需要 JQuery ：

  var img=$('<img/>').attr('src','https://i.stack.imgur.com/FFFir.jpg');
  img.load(function(){
  	 var height=img.height();
  	 var width=img.width();
  	 $(this).remove();
     alert([width, height]);
     /* some more code */
  });
  $('body').append(img);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

如果只设置一个参数（仅高度或仅宽度），则图像通常会与参数的比例相关 原始图像 宽度：100px 身高：50px

如果设置宽度：50px，高度将自动为25px