Predloga:DIY: Razlika med redakcijama

Redakcija: 14:55, 3. oktober 2025

   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;

} </style>

Primer naslova 1

@@ Vrstica 1: / Vrstica 1: @@
 <includeonly>
+<style>
+.project-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+</style>
 <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 1.5rem 0;">
@@ Vrstica 7: / Vrstica 16: @@
      <div style="font-size: 1.1em; font-weight: bold; color: #2c3e50;">[[{{{title1|Primer naslova 1}}}]]</div>
    </div>
-   <div style="flex: 1; position: relative; overflow: hidden;">
+   <div style="flex: 1; position: relative; overflow: hidden; background: white;">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
-       <div style="width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url({{#if:{{{image1|}}}|{{filepath:{{{image1}}}|300}}|{{filepath:Example.jpg|300}}}});"></div>
+       <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+        [[Slika:{{{image1|Example.jpg}}}|sredina|link={{{title1|Primer naslova 1}}}|class=project-image|300px]]
+      </div>
      </div>
-    <a href="{{{title1|Primer naslova 1}}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
 </div>
@@ Vrstica 20: / Vrstica 30: @@
      <div style="font-size: 1.1em; font-weight: bold; color: #2c3e50;">[[{{{title2|Primer naslova 2}}}]]</div>
    </div>
-   <div style="flex: 1; position: relative; overflow: hidden;">
+   <div style="flex: 1; position: relative; overflow: hidden; background: white;">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
-       <div style="width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url({{#if:{{{image2|}}}|{{filepath:{{{image2}}}|300}}|{{filepath:Example.jpg|300}}}});"></div>
+       <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+        [[Slika:{{{image2|Example.jpg}}}|sredina|link={{{title2|Primer naslova 2}}}|class=project-image|300px]]
+      </div>
      </div>
-    <a href="{{{title2|Primer naslova 2}}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
 </div>
@@ Vrstica 33: / Vrstica 44: @@
      <div style="font-size: 1.1em; font-weight: bold; color: #2c3e50;">[[{{{title3|Primer naslova 3}}}]]</div>
    </div>
-   <div style="flex: 1; position: relative; overflow: hidden;">
+   <div style="flex: 1; position: relative; overflow: hidden; background: white;">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
-       <div style="width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url({{#if:{{{image3|}}}|{{filepath:{{{image3}}}|300}}|{{filepath:Example.jpg|300}}}});"></div>
+       <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+        [[Slika:{{{image3|Example.jpg}}}|sredina|link={{{title3|Primer naslova 3}}}|class=project-image|300px]]
+      </div>
      </div>
-    <a href="{{{title3|Primer naslova 3}}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
 </div>
@@ Vrstica 46: / Vrstica 58: @@
      <div style="font-size: 1.1em; font-weight: bold; color: #2c3e50;">[[{{{title4|Primer naslova 4}}}]]</div>
    </div>
-   <div style="flex: 1; position: relative; overflow: hidden;">
+   <div style="flex: 1; position: relative; overflow: hidden; background: white;">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
-       <div style="width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url({{#if:{{{image4|}}}|{{filepath:{{{image4}}}|300}}|{{filepath:Example.jpg|300}}}});"></div>
+       <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+        [[Slika:{{{image4|Example.jpg}}}|sredina|link={{{title4|Primer naslova 4}}}|class=project-image|300px]]
+      </div>
      </div>
-    <a href="{{{title4|Primer naslova 4}}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;"></a>
    </div>
 </div>