Jak zmienić rozmair obrazka nie zmieniając proporcji?
Np. Obrazek 5000x1000
Ale chce go mieć w divie 250x250. Ma być nieucięty i z odpowiednimi proporcjami.
Jak zmienić rozmair obrazka nie zmieniając proporcji
- Rejestracja: dni
- Ostatnio: dni
- Postów: 259
0
- Rejestracja: dni
- Ostatnio: dni
0
przenigdy nie skaluj tego na kliencie (w przeglądarce), raz że niewydajne, dwa że dużo artefaktów
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
0
img {
width: ile tam chcesz px|%;
height:auto;
}
User Bez Loginu napisał(a):
przenigdy nie skaluj tego na kliencie (w przeglądarce), raz że niewydajne, dwa że dużo artefaktów
Przy 5000x5000 na wejściu to faktycznie bez sensu, ale już jak chcesz np. dopasować obrazek 300-500px do mniejszych ekranów, to od lat przeglądarki radzą sobie z tym całkiem dobrze.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 259
0
@Freja Draco: Tylko, że niektóre obrazki są wyższe i przez to mimo width ustawionego na sztywno, wysokością przebijają dostępną przestrzeń.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
0
Pokaż.
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Warszawa
- Postów: 86
0
Czy o coś takiego Ci chodziło?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 250px;
border: 1px solid red;
}
.img-wrapper > img {
width: auto;
max-width: 250px;
height: auto;
max-height: 250px;
}
</style>
</head>
<body>
<div class="main-box">
<div class="img-wrapper">
<img src="landscape.jpg" alt="">
</div>
<div class="img-wrapper">
<img src="portrait.jpg" alt="">
</div>
</div>
</body>
</html>