dataautogpt3 commited on
Commit
afe90ec
·
verified ·
1 Parent(s): c185134

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +25 -14
README.md CHANGED
@@ -20,24 +20,26 @@ tags:
20
 
21
  <style>
22
  .gallery {
23
- display: grid;
24
- grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
 
25
  gap: 15px;
26
  justify-content: center;
27
- max-width: 1200px; /* Limits maximum width to show ~3 images per row */
28
- margin: 0 auto; /* Centers the gallery */
29
  padding: 15px;
30
  }
31
 
 
 
 
 
 
32
  .gallery img {
33
  width: 384px;
34
- height: 384px;
35
- object-fit: cover; /* Maintains aspect ratio */
36
  cursor: pointer;
37
  transition: transform 0.2s;
38
  border-radius: 8px;
39
- margin: 0 auto; /* Centers images in their grid cells */
40
- display: block;
41
  }
42
 
43
  .gallery img:hover {
@@ -65,7 +67,6 @@ tags:
65
  position: relative;
66
  top: 50%;
67
  transform: translateY(-50%);
68
- object-fit: contain; /* Maintains aspect ratio in modal */
69
  }
70
 
71
  .modal.active {
@@ -74,11 +75,21 @@ tags:
74
  </style>
75
 
76
  <div class="gallery">
77
- <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
78
- <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
79
- <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
80
- <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
81
- <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
 
 
 
 
 
 
 
 
 
 
82
  </div>
83
 
84
  <div class="modal" onclick="this.classList.remove('active')">
 
20
 
21
  <style>
22
  .gallery {
23
+ display: flex;
24
+ flex-direction: row; /* Force horizontal layout */
25
+ flex-wrap: wrap; /* Allow wrapping on smaller screens */
26
  gap: 15px;
27
  justify-content: center;
28
+ align-items: center;
29
+ width: 100%;
30
  padding: 15px;
31
  }
32
 
33
+ .gallery-item {
34
+ flex: 0 0 384px; /* Don't grow, don't shrink, fixed width */
35
+ margin: 0;
36
+ }
37
+
38
  .gallery img {
39
  width: 384px;
 
 
40
  cursor: pointer;
41
  transition: transform 0.2s;
42
  border-radius: 8px;
 
 
43
  }
44
 
45
  .gallery img:hover {
 
67
  position: relative;
68
  top: 50%;
69
  transform: translateY(-50%);
 
70
  }
71
 
72
  .modal.active {
 
75
  </style>
76
 
77
  <div class="gallery">
78
+ <div class="gallery-item">
79
+ <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
80
+ </div>
81
+ <div class="gallery-item">
82
+ <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
83
+ </div>
84
+ <div class="gallery-item">
85
+ <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
86
+ </div>
87
+ <div class="gallery-item">
88
+ <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
89
+ </div>
90
+ <div class="gallery-item">
91
+ <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
92
+ </div>
93
  </div>
94
 
95
  <div class="modal" onclick="this.classList.remove('active')">