21.08.2023, 22:19
|
|||
|
|||
Bildgröße automatisch anpassen
Ich möchte Bilder mittels VW/VH an die Bildschirmgröße anpassen, also beispielsweise mit 80vw. Nun macht es ja einen Unterschied, ob die Bilder im Hoch- oder im Querformat vorliegen. Wenn ein Bild höher als breit ist, würden 80vw unter Umständen dazu führen, dass es zu hoch dargestellt wird und oben sowie unten etwas fehlt, weil es über den Bildschirmrand hinausragt. In dem Fall wäre es besser, einen vh-Wert anzugeben.
Gibt es in CSS nicht neuerdings auch die Möglichkeit, entweder/oder-Entscheidungen zu treffen? In diesem Fall also: wenn Bildbreite größer als Bildhöhe (Querformat), dann 80vw ansonsten (Hochformat) 80vh. Geht das irgendwie? 
|
| Sponsored Links |
|
22.08.2023, 00:41
|
|||
|
|||
|
Zitat:
Die Bildergröße sollte sich automatisch abhängig von den restlichen Infos anpassen. Und nicht von starr der Fenstergröße. Mit einem Link zu deiner Seite können wir dir eventuell genauer helfen. Voraussetzung ist wie immer ein korrektes HTML und CSS.
|
| Sponsored Links |
|
22.08.2023, 09:57
|
|||
|
|||
|
So könnte man das machen
Code:
@media (orientation: portrait) {
img, picture {
max-height: 80vw;
width: auto;
vertical-align: middle;
}
}
@media (orientation: landscape) {
img, picture {
max-width: 80vh;
height: auto;
vertical-align: middle;
}
}
Geändert von Sabine1 (22.08.2023 um 10:12 Uhr)
|
|
22.08.2023, 12:44
|
|||
|
|||
|
Danke für Eure Rückmeldung.
@Sabine1: orientation bezieht sich doch aber auf die Ausrichtung des Viewports, nicht des Bildes, das angezeigt werden soll, oder verstehe ich das falsch? Der Browser soll ja entscheiden, ob er die Breite oder die Höhe des Bildes wählt und mit dem Wert 80 anzeigt, in Abhängigkeit, ob das Bild hoch- oder querformatig ist.
|
|
22.08.2023, 18:06
|
|||
|
|||
|
Zitat:
Ich habe dich falsch verstanden.
|
|
24.08.2023, 11:51
|
|||
|
|||
|
Versuch es mal so:
Code:
img, picture {
max-width: 80vw;
max-height: 80vh; /* fallback */
max-height: 80dvh;
object-fit: scale-down;
}
|
|
24.08.2023, 17:07
|
|||
|
|||
|
Inwiefern sollte der einsatz von dvh helfen? das ist doch nur das selbe Problem wieder, nur eben mit einer anderen referenzgröße?
eventuell kommst du mit clamp() ans ziel: damit kannst du eine mindestgröße, gewünschte größe und maximalgröße angeben https://developer.mozilla.org/en-US/docs/Web/CSS/clamp Code:
img {
width: clamp(200px, 80vw, 800px);
}
Funktioniert natürlich mit allen Einheiten (px, %, em...) und größen (width, height, font-size...) kann überall verwendet werden wo einheiten im CSS verwendet werden.
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Div die sich automatisch der Box anpassen | Andreas_ | CSS | 6 | 24.08.2015 16:20 |
| Höhe automatisch dem Inhalt anpassen | Santinho | CSS | 3 | 10.08.2012 08:55 |
| Spaltengröße an Bildschirm automatisch anpassen | beloved_1975 | CSS | 2 | 06.02.2011 18:16 |
| IE soll width von div bei übergroßem inhalt NICHT automatisch anpassen. Wie? | *vivian | CSS | 4 | 15.09.2008 01:42 |
| Grafik soll sich der Größe eines übergeordneten Feldes automatisch anpassen! | VariouStyles | CSS | 1 | 30.08.2007 12:17 |
Linear-Darstellung
