当前位置： 文江博客 话题详情

如何使用JS进行单击扩展图像？

发布于 2025-02-13 03:11:53 字数 4533 浏览 0 评论 0 原文

我使用以下方法。可悲的是，我无法工作。

关于此扩展选项或替代方案，任何建议都会非常有帮助。请注意，我是JS的新手。

提前致谢！

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("image");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
/*main div*/

.ponudba {
  background-color: rgb(0, 0, 0);
  z-index: 3;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  transition-duration: 0.5s;
  filter: contrast(75%);
  transition: all 0.3s ease-in;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), 
              0 3px 4px rgba(0, 0, 0, 0.15),
              0 3px 4px rgba(0, 0, 0, 0.7);
              margin: 0 0 0 15%;
  display: block;
  height: 100vh;
  max-width: 100%;
  animation-name: zoom;
  animation-duration: 0.6s;
  z-index: 3;
}

.image:hover {
  filter: contrast(100%);
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(images/...jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(images/...jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(images/...jpg); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(images/...jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(images/...jpg); 
  flex: 3;
}

.image-06 {
  background-image: url(images/...jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(images/...jpg); 
  flex: 1.5;
}

.image-08 {
  background-image: url(images/...jpg);  
  flex: 2.5;
  background-position: 50% 70%;
}

.image-09 {
  background-image: url(images/...jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(images/...jpg);  
  flex: 3;
  background-position: 50% 80%;
}
#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
    <div class="ponudba" id="ponudba">
    <div class="image-grid">
      <div class="image-row">
        <div class="image image-01" id="image-01"></div> 
        <div class="image image-02" id="image-02"></div>  
        <div class="image image-03" id="image-03"></div>  
        <div class="image image-04" id="image-04"></div>
        
      </div> 
      <div class="image-row">
        <div class="image image-06" id="image-06"></div>  
        <div class="image image-05" id="image-05"></div>
        <div class="image image-07" id="image-07"></div>
      </div>
      <div class="image-row">
        <div class="image image-08" id="image-08"></div> 
        <div class="image image-09" id="image-09"></div>
        <div class="image image-10" id="image-10"></div>  
      </div>
    </div>  
         <div id="myModal" class="modal">
          <span class="close">&times;</span>
          <img class="modal-content" id="image">
         </div>
        </div>

原文

I created a gallery using the following codepen and now I'm trying to add the function click to expand an image, using this JS method. Sadly I cannot get it to work.

Any advice would be very helpful, either regarding this expand option or an alternative. Mind you I'm completely new to JS.

Thanks in advance!

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("image");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
/*main div*/

.ponudba {
  background-color: rgb(0, 0, 0);
  z-index: 3;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  transition-duration: 0.5s;
  filter: contrast(75%);
  transition: all 0.3s ease-in;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), 
              0 3px 4px rgba(0, 0, 0, 0.15),
              0 3px 4px rgba(0, 0, 0, 0.7);
              margin: 0 0 0 15%;
  display: block;
  height: 100vh;
  max-width: 100%;
  animation-name: zoom;
  animation-duration: 0.6s;
  z-index: 3;
}

.image:hover {
  filter: contrast(100%);
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(images/...jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(images/...jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(images/...jpg); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(images/...jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(images/...jpg); 
  flex: 3;
}

.image-06 {
  background-image: url(images/...jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(images/...jpg); 
  flex: 1.5;
}

.image-08 {
  background-image: url(images/...jpg);  
  flex: 2.5;
  background-position: 50% 70%;
}

.image-09 {
  background-image: url(images/...jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(images/...jpg);  
  flex: 3;
  background-position: 50% 80%;
}
#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
    <div class="ponudba" id="ponudba">
    <div class="image-grid">
      <div class="image-row">
        <div class="image image-01" id="image-01"></div> 
        <div class="image image-02" id="image-02"></div>  
        <div class="image image-03" id="image-03"></div>  
        <div class="image image-04" id="image-04"></div>
        
      </div> 
      <div class="image-row">
        <div class="image image-06" id="image-06"></div>  
        <div class="image image-05" id="image-05"></div>
        <div class="image image-07" id="image-07"></div>
      </div>
      <div class="image-row">
        <div class="image image-08" id="image-08"></div> 
        <div class="image image-09" id="image-09"></div>
        <div class="image image-10" id="image-10"></div>  
      </div>
    </div>  
         <div id="myModal" class="modal">
          <span class="close">×</span>
          <img class="modal-content" id="image">
         </div>
        </div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

倾城°AllureLove 2025-02-20 03:11:53

ID 应该是唯一的。

如果您有多个图像，则可以使用 getElementsByClassName 来获取所需的所有元素。

然后使用循环将ONCLICK函数添加到每个元素。

let imgs = document.getElementsByClassName("image"),
    imgModal = document.getElementById('image'),
    modal = document.getElementById('myModal');
for (let i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function (e) { imgZoom(e) }
}
function imgZoom(e) {
    modal.style.display = 'block';
    let src = e.target.style.backgroundImage.slice(4, -1).replace(/['"]/g, "")
    imgModal.src = src
}
let span = document.getElementsByClassName('close')[0];
span.onclick = function () {
    modal.style.display = 'none';
}

因为您的图像是 background -img 在CSS中，请使用 backgroundImage.slice（4，-1）.replace（/['“”]/g，“”）获得 。

URL

​

  1. 在

    让imgs = document.getElementsbyclassName（“ image”）

  2. for（让i = 0; i＆lt; imgblocks.length; i ++）应该是

    for（让i = 0; i＆lt; imgs.length; i ++）

  3. modal 未定义

  4. 背景-IMG：url（'...'）; 应该在HTML文件中写入，或者JS无法获取URL。

    ＆lt; div class =“ Image Image-01” ID =“ Image-01” style =“ backick-image：url（'22 .png'）;”＆gt;＆lt;＆lt;/div＆gt;


”您的问题

  1. 在这种情况下，不必在每个图像（模态除外）上添加ID。

    i按类名选择图像图像 in：

<div class="image image-01" id="image-01"></div>

  1. 我是否需要为每个元素添加for loop？

    您需要将 onclick 添加到您要展开的每个元素。

    由于我选择了class名称的图像，该对象将是类似的

”在此处输入图像描述

用于循环添加 onclick for every ＆lt; div class =“图像图像

  1. ... 22.png'）
    .slice（4，-1）.replace（/['“]/g，“”）将从 url（“ 22.png”）创建一个字符串，，选择“ 22.png” ，然后替换'或“如果存在）。
    最终结果将为 22.png 。

id should be unique.

If you have multiple images, you can use getElementsByClassName to get all elements you need to expand.

Then use for loop to add onClick function to each element.

let imgs = document.getElementsByClassName("image"),
    imgModal = document.getElementById('image'),
    modal = document.getElementById('myModal');
for (let i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function (e) { imgZoom(e) }
}
function imgZoom(e) {
    modal.style.display = 'block';
    let src = e.target.style.backgroundImage.slice(4, -1).replace(/['"]/g, "")
    imgModal.src = src
}
let span = document.getElementsByClassName('close')[0];
span.onclick = function () {
    modal.style.display = 'none';
}

Because your image is background-img in css, use backgroundImage.slice(4, -1).replace(/['"]/g, "") to get url.

/-----Edit-----/

Sorry I made some mistakes in my code.

  1. let imgs = document.getElementsByClassName("image-row") should be

    let imgs = document.getElementsByClassName("image")

  2. for (let i = 0; i < imgBlocks.length; i++) should be

    for (let i = 0; i < imgs.length; i++)

  3. modal is not defined

  4. background-img: url('...'); should write in html file, or js can't get the url.

    <div class="image image-01" id="image-01" style="background-image: url('22.png');"></div>

About your question

  1. It's not necessary to add an id on every image (except modal) in this case.

    I select images by class name image in:

<div class="image image-01" id="image-01"></div>

  1. Do I need to add a for loop for every element?

    You need to add onclick to every element you want to expand.

    Due to I selected images by class name, the object will be something like this

enter image description here

Use for loop to add onclick for every <div class="image imag...</div>

  1. style.backgroundImage = url('22.png')
    .slice(4, -1).replace(/['"]/g, "") will create a string from url("22.png"), select "22.png", then replace ' or " if exist.
    The final result will be 22.png.
回复 原文
秉烛思 2025-02-20 03:11:53

因此，在向同事寻求帮助之后，这就是我得到的 - 带有可点击图像的图像库。

这是笔：

var modal = document.getElementById('Modal');

var imgaes = document.getElementsByClassName('image');
var modalImg = document.getElementById("image-modal");
imgaes = [].slice.call(imgaes);

console.log(imgaes);

imgaes.forEach(function(item){
    item.onclick = function(){
  modal.style.display = "block";
      
  modalImg.src = this.getAttribute('src');
}
})

var span = document.getElementsByClassName("close")[0];

modalImg.onclick = function() { 
  modal.style.display = "none";
}
body {
  margin: 0;
  background-color: rgb(0, 0, 0);
 }

.ponudba {
  position: relative;
  background-color: rgb(0, 0, 0);
  height: 100vh;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 6;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  height: 95%;
  max-width: 100%;
}

.image:hover {
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive
amp;wid=700&qlt=90,0&resMode=sharp2); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93); 
  flex: 3;
}

.image-06 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d); 
  flex: 1.5;
}

.image-08 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png);  
  flex: 2.5;
}

.image-09 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg);  
  flex: 3;
}

#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
  display: block;
   animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}


<!--a BIG thank you to @awecodeman!-->

<div class="ponudba" id="ponudba">
        <div class="image-grid">
          <div class="image-row">
            <div class="image image-01" id="image-01" src="https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg"></div> 
            <div class="image image-02" id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div>  
            <div class="image image-03" id="image-03" src="https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive
amp;wid=700&qlt=90,0&resMode=sharp2"></div>  
            <div class="image image-04" id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>
          </div> 
          
          <div class="image-row">
            <div class="image image-05" id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div>  
            <div class="image image-06" id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg"></div>
            <div class="image image-07" id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>
          </div>
          
          <div class="image-row"">
            <div class="image image-08" id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png"></div> 
            <div class="image image-09" id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>
            <div class="image image-10" id="image-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg"></div>     
                                                       <div id="Modal" class="modal">
      <span class="close">×</span>
      <img class="modal-content image" id="image-modal"></div>
          </div> 
</div>





    
    

      
So after asking a collegue for help, this is what I got - an image gallery with clickable images.


Here's the pen: https://codepen.io/fullstackgenerator/pen/YzaqYdb


var modal = document.getElementById('Modal');

var imgaes = document.getElementsByClassName('image');
var modalImg = document.getElementById("image-modal");
imgaes = [].slice.call(imgaes);

console.log(imgaes);

imgaes.forEach(function(item){
    item.onclick = function(){
  modal.style.display = "block";
      
  modalImg.src = this.getAttribute('src');
}
})

var span = document.getElementsByClassName("close")[0];

modalImg.onclick = function() { 
  modal.style.display = "none";
}


body {
  margin: 0;
  background-color: rgb(0, 0, 0);
 }

.ponudba {
  position: relative;
  background-color: rgb(0, 0, 0);
  height: 100vh;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 6;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  height: 95%;
  max-width: 100%;
}

.image:hover {
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive
amp;wid=700&qlt=90,0&resMode=sharp2); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93); 
  flex: 3;
}

.image-06 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d); 
  flex: 1.5;
}

.image-08 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png);  
  flex: 2.5;
}

.image-09 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg);  
  flex: 3;
}

#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
  display: block;
   animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}


<!--a BIG thank you to @awecodeman!-->

<div class="ponudba" id="ponudba">
        <div class="image-grid">
          <div class="image-row">
            <div class="image image-01" id="image-01" src="https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg"></div> 
            <div class="image image-02" id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div>  
            <div class="image image-03" id="image-03" src="https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive
amp;wid=700&qlt=90,0&resMode=sharp2"></div>  
            <div class="image image-04" id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>
          </div> 
          
          <div class="image-row">
            <div class="image image-05" id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div>  
            <div class="image image-06" id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg"></div>
            <div class="image image-07" id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>
          </div>
          
          <div class="image-row"">
            <div class="image image-08" id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png"></div> 
            <div class="image image-09" id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>
            <div class="image image-10" id="image-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg"></div>     
                                                       <div id="Modal" class="modal">
      <span class="close">×</span>
      <img class="modal-content image" id="image-modal"></div>
          </div> 
</div>




    

    
    
    
    

      
        
           回复
        
      

      
        
      

      

      
      

      

      
      
        原文 
      
      
    

  




        
        
        
~没有更多了~

      

    

    
  


  
  
  



            
            
          

          

  

  
  

  
  
  

    

      

        
关于作者

      

      

        
          
        
        情愿
        
暂无简介

      

      

        

          
          文章
        

        

          
          评论
        

        

          28
          人气
        

      

      

        
        
           发私信
        
      

    

  

  

  
  

  
  

  
  
  




  

    
  


  
  

    

      

        
相关话题

      

      

        
      

    

  

  
  

  
  

    

      

        更多 
        
热门标签

      

      

        
        操作系统
        
        程序设计
        
        IT运维
        
        Linux系统管理
        
        JavaScript
        
        服务器应用
        
        solaris
        
        C/C++
        
        PHP
        
        Shell
        
        BSD
        
        Vue.js
        
        aix
        
        Oracle
        
        Python
        
        HTML
        
        系统管理
        
        HTML5
        
        CSS
        
        前端
        
      

    

  

  

  

  
  

    

      

        更多 
        
推荐作者

      

      

        

          
          

            

              
                
              
            

            
            

              
十二

              

                文章 0
                评论 0
              

            

          

          
          

            

              
                
              
            

            
            

              
飞烟轻若梦

              

                文章 0
                评论 0
              

            

          

          
          

            

              
                
              
            

            
            

              
OPleyuhuo

              

                文章 0
                评论 0
              

            

          

          
          

            

              
                
              
            

            
            

              
wxb0109

              

                文章 0
                评论 0
              

            

          

          
          

            

              
                
              
            

            
            

              
旧城空念

              

                文章 0
                评论 0
              

            

          

          
          

            

              
                
              
            

            
            

              
-小熊_

              

                文章 0
                评论 0
              

            

          

          
        

      

    

  

  

  
  

  

    

      

        更多 
        
友情链接

      

      

        
        文江博客
        
      

    

  


  

    

      

        

          
    
        
    
      
    
    
    
  
    

    

        
    
      
    
    
    

    


    
  
    
    
    
    
    
  
    

    


    
  
    
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的
    隐私政策
    了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
  
    
  
    
    
    
  
    

    


    
  
    
    原文