JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="UliHF, post: 14176, member: 4817"] HTML und CSS sind - wie viele andere Zusammenhänge auch - ein komplexes, weites Feld. Vermutlich könnte man damit auch Jahre zubringen. Wenn [I]eine[/I] Sache in Ordnung scheint, gerät [I]eine andere[/I] außer Kontrolle.. Nach vielem Lesen und immer noch nicht viel schlauer geworden weiss mir nicht anders zu helfen, als hier an diesen Thread weiter anzuhängen. Was gewünscht ist: - ein Bild automatisch einbinden / skalieren in einen übergeordneten Container OHNE dessen als fest zu betrachtende Grenzen / Abmessungen zu überschreiten (falls etwas nicht reinpasst, ist der Coder wieder an der Reihe) aus diesem Grunde mit: - overflow hidden (als 'Notbremse' für's Layout gedacht) - tatsächliche img-Abmessungen und Seitenverhältnis kann geliefert werden, falls dies hier etwas bringt Nachdem die Navigations-Buttons nun furchtbar aussehen ([URL='http://tmpblog5.ulrich-hauser.de']hier[/URL]) und - der W3-Validator meint nun: OK - der inspektor sagt bei vielen Elementen: "das Element versucht einen overflow" (kann ich sinngemäß nachvollziehen) - der hinter dem Rechner sitzt sagt: so ein Mi.., wie das aussieht, jetzt, nachdem andere Agenten zufriedener sind Hoffe, das Thema ausreichend beschrieben zu haben und kann nur auf das Prinzip Hoffnung schalten :cry: [B]Bearbeitung (07.08.23):[/B] Ich möchte das Problem gerne von der anderen Seite her angehen: Auf einer isolierten Basis, gefunden bei [URL='https://www.tutorialrepublic.com/faq/how-to-auto-resize-an-image-to-fit-into-a-div-container-using-css.php']tutorialrepublic[/URL], soll das Beispiel einschließlich aller tatsächlich gewünschten Aspekte erzeugt werden. Der Code sieht so aus und funktioniert wie gewünscht (img src... wäre auf einem anderen Rechner zu ersetzen): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Resize Image Proportionally with CSS</title> <style> img{ max-width: 100%; max-height: 100%; display: block; /* remove extra space below image */ } .box{ width: 250px; border: 5px solid black; } .box.large{ height: 300px; } .box.small{ height: 100px; } </style> </head> <body> <h2>Image inside Auto-height Div</h2> <div class="box"> <img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky"> </div> <br> <h2>Image inside Portrait Div</h2> <div class="box large"> <img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky"> </div> <br> <h2>Image inside Landscape Div</h2> <div class="box small"> <img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky"> </div> <p><strong>Note:</strong> The original size of the image is 500x300 pixels, but using the "max-width" and "max-height" property we are still able to show the complete image inside the DIVs having different width.</p> </body> </html> Nachdem auf diese Art alles wie gewünscht funktioniert, soll es in den aktuellen [URL='http://tmpblog5.ulrich-hauser.de']Bestand[/URL] eingebaut werden. In diesem durchkreuzen voraussichtlich [I]nur[/I] die für mich noch sehr undurchsichtigen Vererbungsregeln den Plan... Sobald dies fertig ist, kann leichter danach geschaut werden. Danke für die erforderliche Geduld Uli [/QUOTE]

Authentifizierung