zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild zuschneiden wenn Fenster verkleinert wird

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2016, 20:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.09.2015
Beiträge: 23
mitchm befindet sich auf einem aufstrebenden Ast
Standard Bild zuschneiden wenn Fenster verkleinert wird

Hi zusammen,

Oben steht es ja schon beschrieben...
habe ein IMG mit einer width: 100%...
wenn ich das Fenster verkleiner, wird das bild natürlich auch kleiner.
Ich will aber dass es rechts und links etwas "abgeschnitten" wird und nur der Mittelteil sichtbar bleibt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.12.2016, 13:36
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

HTML-Code:
<div style="text-align: center; overflow: hidden;">
	<img style="min-width: 100%; margin: 0 -100%;" src="bild.jpg" alt="">
</div>
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.12.2016, 15:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.11.2015
Beiträge: 191
David1997 befindet sich auf einem aufstrebenden Ast
Standard

Meinst du so etwas?

HTML-Code:
<style>
#images {
	width:100%;
	height:120px;
	overflow:hidden;
	position:relative;
}
#images img {
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
}
</style>

<div id="images">
<img src="http://static.adzerk.net/Advertisers/1c1bfa72ac5a41cfb32fb62d2188c02a.png">
</div>
Mit Zitat antworten
  #4 (permalink)  
Alt 27.12.2016, 16:25
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 628
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von David1997 Beitrag anzeigen
Meinst du so etwas?
So bestimmen aber DIV- und Bild-Breite ob das Bild exakt zentriert wird. Also zu individuell.
Außerdem zwingt die absolute Positionierung dazu, dass das DIV die Höhe des Bildes (als height) bekommt.
Deutlich pauschaler und flexibler ist es wie in meinem Beispiel. Die Bild-Höhe bestimmt die Höhe des Konstrukts (des DIVs).
Zur Sicherheit können die Margin-Werte erhöht werden: beispielsweise auf "-300%" oder "-80em"

.
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div Box bricht weg, wenn Fenster verkleinert wird seerose CSS 10 18.09.2015 15:56
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 18:20
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln. Andreas91 Grafik, Design, Typografie 1 06.09.2011 22:41
Bild verkleinert anzeigen Eppi CSS 1 15.10.2007 16:11
Bild in neuem Fenster öffnen (Fenstergröße vorgeben) Sp33dy G0nz4l3s Javascript & Ajax 4 05.06.2006 14:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:40 Uhr.