• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FotoKacheln für StartSeite_ iFrame Ränder schneiden Fotos ab beim hovern +verzerrt dargestellt.

M

Manuel Lemke

Mitglied
Hi. Mein Foto (mit einem Link) wird leider beim vergrößern abgeschnitten, von den Rändern des <iFrame> Elements, soll aber komplett zu sehen sein. Woran könnt das liegen?
Als ZoomEffekt hab ich größere z-index eingestellt, sollte daher meiner Erwartung nach, über die Grenzen des umliegenden Elements hinaus ragen, welches niedrigeres z-index Level hat, weil es weiter vorne ist. Trifft diese Annahme zu [ja/ nein]?

Bilder mit Links als Schaltflcähen befinden sich in Rahmen aus mehreren gleich großen <div>.
Struktur ist jeweils
Link div Bild.
= das sind FotoKacheln für die StartSeite.

Das Css der Fotos soll deckend +unverzerrt sein, jeweils zugeschnitten auf eine Kachel.
Design funktioniert mit meinen FotoPräsentationsFolien, jeweils Hintergrund für 1e Seite, soll jetzt nur auf KachelnFläche angewandt werden.
BildSchaltflächen werden außerdem verzerrt dargestellt, sobald man FensterGröße ändert, das ist nicht der Fall bei kompletten Seiten als Hintergrund,
das liegt also an verschachtelter Struktur <a><div><img></div></a>
an einer Stelle.

Kacheln (also divs) sollten auch möglichst höhe und breite gleich sein, quadratisch! Das funktioniert bei weiteren SeitenElemente,
aber nicht bei den Kacheln über die CssParameter
height: 24vh; width: 24vh;

1624669177678.png
 
<html>

<head>
</head>

<BODY Style="
position:relative; z-index: 1;
top:0px; left:0px; right:0px; bottom:0px;
width:100%; height:100%;
margin:0px;padding:0px;
border:none; outline: none;
background-color:transparent;
">

<style>
#Kacheln {
float: left;
margin-left:12px;
margin-top:12px;
margin-bottom:0px;
padding: 0px;
height: 24vh;
width: 24vh;
min-
height: 222px;
min-width: 222px;
border: 0px;
}

#KachelFotos {z-index:4; position:relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
object-fit: cover;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
margin: 0px; padding:0px;
opacity: 1.0;
border-radius: 5%;
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));}

#KachelFotos:hover {z-index:17; position:relative;
opacity: 0.9;
-ms-transform: scale(1.3); /* IE */ -webkit-transform: scle(1.3); /* Safari */ transform: scale(1.3);
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8);}
</style>


<a href="Link1.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link2.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link3.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link4.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link5.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link6.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link7.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link8.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link9.html" target="_top" style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<a href="Link10.html" target="_top"style=";"><div id="Kacheln"><img id="KachelFotos" src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg"></div></a>

<br><br><br> <br><br><br><br>
</BODY>
</html>
 
Zuletzt bearbeitet:
Das ist das KachelElement (siehe oberhalb, vorheriges), die Seite hab ich genannt
Service1001Test.html

RahmenElement mit dem iFrame Service1001Test.html
sieht aus
wie folgt (bitte blättern nach unten)_
 
<html>
<head>

<style>
* {margin: 0;padding: 0;}
</style>

</head>


<BODY Style="Font-Family:Arial, sans-serif; font-color:#000;
overflow:hidden; border:none; outline: none;
background-color:transparent;
">

<iFrame name="Screen1" id="Screen1" src="Service1001Test.html" style="
background: rgb(0 255 43 / 89%);
position:absolute; z-index:2;
min-width:80%;min-height:90%;
border-width:0px;
left:123px; right: 0px; bottom:-8px;
overflow: hidden;
border-radius: 24px 24px 0px 0px;
"></iFrame>

</div>


</body>
</html>
 
Zuletzt bearbeitet:
Am liebstenhätte ich alles in 1, ohne iFrame, aber dann fehlen die ScrollLeisten im responsiven Design für schmale 9:16 Bildschirme, und so hab ich iFrame verwendet, mit externer Seite. Selbst wenn man anstatt iFrame das als <div> benennt, und zusammen baut, werden immernoch die Kacheln abgeschnitten an den Rändern.

Sekkundäre Herausforderung_
Breite des iFrame oder div passt auch nicht, das iframe oder div soll links 123pixel Abstand halten, rechts möglichst bündig, will nicht, ignoriert den Parameter right: 0px
siehe vorheriger HtmlCode der HauptSeite, zwischen den
<style>
</style>
.
 
Fasse noch einmal zusammen,
0) Struktur verschachtelt ist iFrame Link div Bild.

Herausforderungen gibt s folgende_
1) Kacheln abgeschnitten von iFrame bzw. div. !
2) KachelRahmen (divs) sollten quadratisch sein !
3) Bilder verzerrt (wenn ich FensterGröße ändere) anstatt Maßstabs erhaltens auf div Größen zugeschnitten.

Vielen herzlichen Dank für eure Hilfe!

Anbei die 2 html Seiten, und externe BeispielFoto ist von selfhtml, wiederholend immer das gleiche.
Mein Design (unvollstänid) kann jeder gerne weiter nutzen, auch kommerziell, egal, einzige Bedingung
meine Bitte wer es verbessert / weiter entwickelt hier teilen, für ebenso kostenfreie uneingeschränkte Nutzung für alle!
 

Anhänge

Zuletzt bearbeitet:
1. Flexbox verwenden (Kein float!!!)
2. Kein iFrame verwenden, wenn du Scrollbars willst beschäftige Dich mit overflow: scroll
3. Wenn du einem Foto 100% Breite und 100% Höhe gibst ist es logisch, dass es verzerrt, so lange es kein quadratisches Bild ist.
4. Eine id muss einmalig sein, du hast x Mal die id Kacheln und x Mal die id KachelFotos. Verwende Klassen.

Du tust weiter das was du immer tust, irgendwas rumwursteln anstatt die Grundlagen zu lernen. Und so wirst du nie ein brauchbares Resultat erhalten.
 
jonas3344 schrieb:
Du tust weiter das was du immer tust, irgendwas rumwursteln anstatt die Grundlagen zu lernen.
Zum Vergrößern anklicken....
Dem kann man nur zustimmen! Selten so einen lernresistenten Zeitgenossen in einem Forun erlebt.

Aber dafür schreibt er ja immer viel sinnlosen Text und die Formatierungsmöglichkeiten des Forums hat er auch noch nicht gefunden.
 
5, Was soll das werden?
6. Warum nutzt du das style Attribute bei Body ?
Schreib es in den <style> Element oder direkt in einer externe CSS Datei.
Dass man iFrame hier Mist ist, wurde ja schon gesagt.
Du könntest auch ein Container erstellen und den Inhalt mit PHP oder JS/Ajax laden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben