Question

嗨，所以我在网站上创建了一些图片（请不要随时随地学习）。我希望用户能够点击图像并查看完整的图像弹出，所以就像实际图像的原始大小一样，我已经为下面的图片添加了代码。

<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>

悬停：

.image.fit >img:hover {
            width: 1000px;
            height: 1000px;
            position: absolute;
        }

Answer 1

应该完全删除span元素，并将其类放在图像元素本身上。

此外，您有一个嵌套的section元素，它没有为您做任何事情。

最后，不要使用HTML标题元素（<h1> ... <h6>），因为它们为文本设置样式的方式。格式化是CSS的工作。使用figure和figcaption元素围绕每个图片及其附带的文字更为合适，而不是标题。

img { 
  width:200px;
  border:1px solid black; /* This is only added for testing purposes*/
}

.thumbnail:hover {
   width: 500px;
   height:auto;
   position:relative;
   /* push image to the right by 1/2 the screen width and 1/2 the image width */
   margin-left:calc(50% - 250px);
}

<section id="main">
  <div class="inner">
    <div class="box alt">
      <div class="row 50% uniform">
         <div class="4u">
           <figure>
             <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>

         <div class="4u">
           <figure>
             <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
         <div class="4u">
           <figure>
             <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
       </div>
     </div>
   </div>
 </section>

Answer 2

要执行此功能，您需要学习一些Javascript or jquery

我认为以下代码将满足您的需求

<html>
<head>
<meta charset="utf-8"/>
<script>
function show_img(obj) {
    var img_src = obj.getAttribute("src");
    document.getElementById("full_screen").style.display = "block";
    document.getElementById("img_explore").innerHTML = "<img src="+img_src+">";
}
</script>
</head>
<body>
<style>
#full_screen {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#full_screen img {position:absolute; width:100%; height:100%;}
#close {position:absolute; background:rgba(0,0,0,0.6); width:100%; text-align:right; color:#fff; z-index:10;}
        </style>
<div id="full_screen">
<div id="close" onclick="document.getElementById('full_screen').style.display = 'none';">Close</div>
<div id="img_explore"></div>
</div>
<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="editor-photo-landing-image-v1.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="food-restaurant-kitchen-meat-23086.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="pexels-photo-167890.jpeg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>
</body>
</html>

Answer 3

我已经Scott Marcus' answer并且已经过调整以点击，这是您的原始请求。

主要差异是在页面上添加:target标记定位元素并在css中使用img { width:200px; border:1px solid black; /* This is only added for testing purposes*/ } .thumbnail:target { width: 500px; height:auto; position:relative; /* push image to the right by 1/2 the screen width and 1/2 the image width */ margin-left:calc(50% - 250px); }。

<section id="main">
  <div class="inner">
    <div class="box alt">
      <div class="row 50% uniform">
         <div class="4u">
           <figure>
             <a href="#image1">
             <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>

         <div class="4u">
           <figure>
             <a href="#image2">
             <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
         <div class="4u">
           <figure>
             <a href="#image3">
             <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
       </div>
     </div>
   </div>
 </section>

    @POST
    @Path("/verifyToken")
    @Produces(MediaType.APPLICATION_JSON)
public Response verifyToken(@Context HttpHeaders headers,@Context HttpServletRequest request) {
        try {
            String auth = headers.getRequestHeader("authorization").get(0);

            if (!auth.isEmpty()) {
                System.out.println("logged auth token: " + auth);
            }

            // validate token
            Task<FirebaseToken> task = FirebaseAuth.getInstance().verifyIdToken(auth)

            .addOnSuccessListener(new OnSuccessListener<FirebaseToken>() {
                @Override

                public void onSuccess(FirebaseToken decoded) {
                    String uid = decoded.getUid();
                    //do some stuff

                }
        });
            /*
             The return statement below shouldn't run unless "task" is 
             complete.
              task has method isComplete()
            */
            return Response.status(200).entity(user).build();

        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("Login Exception " + e.getMessage());
            return Response.status(500).build();
        }

    }

单击时弹出HTML图像

3 个答案: