单击时弹出 HTML 图像 [英] Pop Up HTML Image when clicked

查看：23
本文介绍了单击时弹出 HTML 图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我创建的网站上有几张图片(请不要在我继续学习的过程中学习).我希望用户能够单击图像并查看图像的完整弹出窗口，因此就像实际图像的原始大小一样，我为下面的图片添加了代码.

<div class="inner"><部分><div class="box alt"><div class="行 50% 统一"><div class="4u"><span class="image fit"><imgsrc="images/marble/1.jpg" width="321" height="230" alt=""/><h3>Marble</h3></span></div><div class="4u"><span class="image fit"><imgsrc="images/marble/2.jpg" width="321" height="230" alt=""/><h3>Marble</h3></span></div><div class="4u"><span class="image fit"><imgsrc="images/marble/3.jpg" width="321" height="230" alt=""/><h3>大理石</h3></span></div>

</节>

</节>

悬停:

.image.fit >img:hover {宽度:1000px；高度:1000px；位置:绝对；}

解决方案

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

此外，您有一个嵌套的 section 元素，它对您没有任何作用.

最后，不要使用 HTML 标题元素 (

...
)，因为它们的文本样式.格式化是 CSS 的工作.用 figure 和 figcaption 元素包围每个图像及其随附的文本比标题更合适.

img {宽度:200px；边框:1px纯黑色；/* 这只是为了测试目的而添加的*/}.thumbnail:悬停{宽度:500px；高度:自动；位置:相对；/* 将图像向右推 1/2 屏幕宽度和 1/2 图像宽度 */margin-left:calc(50% - 250px);}

<div class="inner"><div class="box alt"><div class="行 50% 统一"><div class="4u"><图><img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="缩略图"><figcaption>大理石</figcaption></图>

<div class="4u"><图><img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="缩略图"><figcaption>大理石</figcaption></图>

<div class="4u"><图><img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="缩略图"><figcaption>大理石</figcaption></图>

</section>

Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below. 

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

Hover:

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

解决方案

The span elements should be completely removed and its classes placed on the image elements themselves.

Also, you have a nested section element that isn't doing anything for you.

Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.

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>

这篇关于单击时弹出 HTML 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆