Górny i dolny fragment zdjęcia jest wycięty przy pokazie slajdów

Question

Witam.
Gdy zdjęcia są wczytywane z serwera, to pokazywane są w całości (nie są wycięte).
Gdy zdjęcia są wczytywane z mojego dysku twardego, to w niektórych jest wycięty górny i dolny fragment.

Tu jest mój kod na CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx

Zdjęcia wczytywane z serwera zawierają ścieżkę:

<img src="https://source.unsplash.com/1600x900/?art" alt="">

Zdjęcia wczytywane z mojego dysku twardego zawierają ścieżkę:

<img src="images/slides/foto-1.jpg" alt="">
<img src="images/slides/foto-2.jpg" alt="">
<img src="images/slides/foto-3.jpg" alt="">

Zauważcie, że jakieś tam zdjęcie wczytywane z serwera ma podobno rozdzielczość 1600x900 (tak jest podane w linku).
Zdjęcie wczytywane z mojego dysku twardego "foto-1.jpg" ma rozdzielczość 1200x900 (przy pokazie slajdów jest wycięty górny i dolny fragment).

Zrobiłem jeszcze taki test i zapisałem w HTML:

<img src="images/slides/foto-1.jpg" alt="" width="1600" height="900">

...ale niestety dalej jest tak samo wycięty górny i dolny fragment zdjęcia.

Nie przeszkadza mi to, że zdjęcie może być trochę rozciągnięte na samej wyświetlanej wysokości (height).

Czy wiecie jak zrobić, aby zdjęcie o rozdzielczości 1200x900 było wyświetlane w całości przy pokazie slajdów ?

Będę bardzo wdzięczny za skuteczną pomoc.

Answer 1

Cześć, bez zagłębiania się logikę działania skryptu, z tego co mogłem wydedukować z Developer Tools w przeglądarce, to wygląda na to, że skrypt ustawia taką właściwość CSS:

.slider img {
	object-fit: cover;
	object-position: center;
}

`Object-fit` wyznacza sposób, w jaki zdjęcie jest umieszczane w nadrzędnym pojemniku.

Wartość `cover` daję właśnie to działanie, o którym wspominasz, że jest problematyczne, czyli ucinanie tej części zdjęcia, która się "nie mieści", zachowując przy tym prawidłowe proporcje zdjęcia. Natomiast `object-position` wyznacza to, jaką część obrazu chcemy by była widoczne, jeśli reszta ma być ucięta. Wartość `center` sprawia, że góra i dół są obcinane. Tak naprawdę to nawet te zdjęcia o 1600x900 są ucinane, lecz bardzo nieznacznie, więc być może po prostu nie zauważyłeś tego. W przypadku zdjęć 1200x900 ucięciu ulega znacznie większy rozmiar. To, czy zdjęcie jest z serwera czy z pliku lokalnego nie robi tu różnicy :)

Zapewne bardziej by Ci odpowiadała wartość `contain`. Jak nazwa wskazuje, całe zdjęcie ma być zawarte w nadrzędnym pojemniku. W tej sytuacji dostajemy te "czarne belki" po bokach zdjęcia, a proporcja jest zachowana. Wystarczy ustawić:

.slider img {
    object-fit: contain;
}

Natomiast, w CodePen skrypt biblioteki będzie nadpisywał tą deklarację CSSa. W normalnym kodzie źródłowym, wystarczy podpiąć skrypt biblioteki przed plikiem CSS aby zaradzić temu. Nie wiem, czy w CodePen jest możliwość wpływania na kolejność podpinania plików. W ostateczności można użyć dwóch klas aby zastosować deklarację o wyższej specyficzności w CSS.

<img src="images/slides/foto-1.jpg" alt="" class="full-img">

.slider .full-img {
    object-fit: contain;
}

Możesz poczytać więcej o `object-fit` na stronie MDN. Istnieje też opcja `fill`, która "rozciąga" zdjęcie aby wypełnić pojemnik, nie zachowując proporcji.

To jest moja pierwsza udzielona odpowiedź w tym serwisie, więc jeśli coś mógłbym poprawić to proszę, dajcie mi znać śmiało. :)

Comments

Próbowałem wcześniej takiego zapisu:

wariant nr 1

.slider img
{
	object-fit: contain;
}

wariant nr 2

.slider_img_wrapper > img
{
	object-fit: contain;
}

...ale niestety te 2 powyższe warianty nie przyniosły żadnego efektu.

Wariant nr 3

<img src="images/slides/foto-1.jpg" alt="" class="full-img">

.slider .full-img
{
	object-fit: contain;
}

W wariancie nr 3 to foto-1.jpg jest teraz widoczne w całości, ale są "czarne belki" po bokach zdjęcia, więc nie jest idealnie. Byłoby super pozbyć sie tej "czarnej belki" po lewej i po prawej.

Czy wiesz jak zrobić, żeby pozbyć sie tych "czarnych belek" po obu stronach ?

---

Spróbuj może z: background-color: transparent; (lub kolor tła pod obrazkiem - img-iem)

 

<img src="https://source.unsplash.com/1200x900/?art" width="1600" height="900">

img {
  border: 2px solid red; /* dla demonstracji */
  object-fit: contain;
  object-position: center;
  background-color: limegreen;  /* dla demonstracji */
  /*  background-color: transparent; */
}

 

---

@Krzysiek_34,

Tak jak wspominałem, wariant pierwszy i drugi będzie działać tylko wtedy, kiedy podepniesz bibliotekę przed plikiem CSS, np:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/mobile-json-carousel/css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<!-- NASZE PLIKI -->
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

Natomiast, jeśli nie masz możliwości zmiany kolejności podpięcia plików (tak jak wspominałem, nie wiem czy w CodePen jest), to trzeba użyć bardziej specyficznego selektora niż ten, którego biblioteka używa (`.slider img`).

2 klasy > 1 klasa i 1 znacznik, zatem wariant 3 działa niezależnie od kolejności podpięcia plików.

Rozwiązanie z przeźroczystym tłem powinno załatwić sprawę. Możesz też wcale nie dodawać tła, efekt będzie ten sam. Tło w twoim kodzie siedzi w klasie `box` w razie czego ;)

---

W takim razie jakie to mają być 2 klasy > 1 klasa i 1 znacznik ?

Bo już sie pogubiłem.

Rozwiązanie z przezroczystym tłem to chodzi o coś takiego ?

.slider .full-img
{
    object-fit: contain;
    background-color: transparent;
}

Ja już nie mam pomysłu.

W ostateczności mogę temu zdjęciu "foto-1.jpg" wprowadzić rozdzielczość 1600x900 (zamiast 1200x900) przy pomocy jakiegoś programu do grafiki i w rezultacie to zdjęcie będzie trochę rozciągnięte na szerokości.

---

Pisząc "2 klasy > 1 klasa i 1 znacznik" miałem na myśli, że selektor złożony z dwóch klas ma większa (stąd znak większy niż) specyficzność niż selektor złożony z jednej klasy i jednego znacznika.

Wspomniałem, że w twoim kodzie tło jest ustawione w selektorze o klasie box, czyli `.box`. Usuń deklarację `background-color` w nim. Na samych elementach `img` tła nie ma, więc zapis jaki przedstawiłeś nie zadziała.

---

Zrób tak jak napisał Tobie @dawidl022 powyżej

 

W ostateczności mogę temu zdjęciu "foto-1.jpg" wprowadzić rozdzielczość 1600x900 (zamiast 1200x900) przy pomocy jakiegoś programu do grafiki i w rezultacie to zdjęcie będzie trochę rozciągnięte na szerokości.

może zapisać obrazek jako png i pozostawić 1200 x 900 bez rozciągania na
1600 x 900 dodaj tło przeźroczyste (transparent)

---

@dawidl022,

W klasie box usunąłem:

background-color: #191919;

...ale to jeszcze pogorszyło efekt, bo nic to nie dało. Zniknęło tylko ciemno tło dookoła obrazka.

Aktualnie tak wygląda kod w HTML:

<div class="slider">
	<div class="slider_img_wrapper">
		<img src="images/slides/foto-1.jpg" alt="" class="full-img">
	</div>
</div>

W CSS zapisałem jeszcze takie 2 warianty:

wariant 1

.slider .slider_img_wrapper > img .full-img
{
	object-fit: contain;
}

wariant 2

.slider > img .full-img
{
	object-fit: contain;
}

Niestety te 2 powyższe warianty w CSS nie przyniosły żadnego efektu.

Ja już poddaje się.

Czy pomożesz, aby w końcu obrazek o rozdzielczości 1200x900 wyświetlał się w całości ?