彈出HTML圖片點擊

嗨，所以我有一個網站，即時通訊創建幾張圖片（請不要im學習，因爲我一直沿着）。我希望用戶能夠點擊圖像並查看圖像的完整彈出，所以像實際圖像的原始大小一樣，我添加了下面圖片的代碼。彈出HTML圖片點擊

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

來源

2017-07-11 Rikhil Shah

看看這個https://www.w3schools.com/howto/howto_css_modal_images.asp – Tareq

[歡迎的StackOverflow（https://stackoverflow.com/tour）。請閱讀我們的[問]頁面提示如何改善您的問題。好的問題往往會從社區中產生更快，更好的答案。 – ochi

您將需要每個圖像的兩個版本（小縮略圖和全尺寸圖像）。但是，我們不是代碼編寫服務。你必須先嚐試一下，然後再回到你遇到的任何特定的編程問題。 –

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

來源

2017-07-11 23:27:18

要做到這個功能，你需要學習一些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>

來源

2017-07-11 23:18:40

我已經採取Scott Marcus' answer並適用於點擊，這是你的原始請求。

主要差異是在頁面上添加了a標籤定位元素，並在css中使用了:target。

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>

來源

2017-07-12 01:13:45

彈出HTML圖片點擊

回答

相關問題