点击

Question

我正在尝试在网页上显示单张图片，以便：

如果图像小于用户的屏幕。显示完整图像

否则，如果图像大于用户的屏幕，那么它应适合屏幕，一旦点击图像，则只显示完整尺寸。

这是我的HTML

<html>
<body>
<div class="img">
<img src="imagepathhere.jpg" />
</div>

</body>
</html>

这是我尝试过的css，但我想仅仅使用css是不可能的：

    <style>
    html,body{
    min-width:100%;
    margin:0px;
    padding:0px;
    }

    .img {
    padding:0px;
    width:auto;
    text-align:center;
    margin:auto;
    }
    .img img {
    max-width:100%;
    }
</style>

最好的方法是什么？

艾哈迈尔。

Answer 1

点击

切换max-width:100%

最简单的方法是将此属性添加到类中，而不是将其应用于标记名称

.img .shrinkToFit {
    max-width:100%;
}

然后使用JQuery点击

切换它

$(".img").on("click", function() {
    $(this).find("img").toggleClass("shrinkToFit");
});

示例：http://jsfiddle.net/TrevinAvery/anryho0o/

Answer 2

这是一个解决方案，它限制了您描述的图像，但是它的父div而不是整个屏幕（以便于使用它作为示例）。它使用的css :not()选择器可能没有完整的浏览器支持。

http://codepen.io/sean9999/pen/LlCJa/

"use strict";

$('#toggleimage a').on('click',function(){
  $('.img img').prop('src', $(this).data('imgSrc') );
});

$('.img img').on('click',function(){
  $(this).toggleClass('fullsize');
});

    html,body{
      min-width:100%;
      margin:0px;
      padding:0px;
      background-color: silver;
   }

   .img {
      padding:0px;
      width: 450px;
      height: 450px;
      background-color: white;
      text-align:center;
      margin:auto;
      border: 1px dotted gray;
   }
   .img img:not(.fullsize) {
      max-width:100%;
      max-height: 100%;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="toggleimage">
  <li><a href="#" data-img-src="http://nerdhow.files.wordpress.com/2008/02/mushroombgbig.png">load big image</li>
  <li><a href="#" data-img-src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png">load small image</a></li>
</ul>

<div class="img">
  <img src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" />
</div>

Javascript仅在点击其他适合屏幕时显示完整图像

2 个答案:

点击