• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skalowanie obrazka ale z zachowaniem oryginalnych rozmiarów

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
298 wizyt
pytanie zadane 17 stycznia w HTML i CSS przez Piotrek2713 Mądrala (5,500 p.)
Chcę osiągnąć taki efekt:

Po najechaniu na obrazek będzie miał większą skalę, ale będzie widoczne tylko to, co się mieści w oryginalnej wersji obrazka. A więc skaluje się, ale nie zwiększa rozmiaru.

1 odpowiedź

+2 głosów
odpowiedź 17 stycznia przez Comandeer Guru (606,160 p.)
wybrane 17 stycznia przez Piotrek2713
 
Najlepsza

Hm, a nadanie overflow: hidden elementowi, w którym obrazek się znajduje? To sprawi, że nic nie powinno poza niego wystawać.

komentarz 17 stycznia przez Piotrek2713 Mądrala (5,500 p.)
Nie działa
komentarz 17 stycznia przez Comandeer Guru (606,160 p.)
To może pokaż jakiś kod?
komentarz 17 stycznia przez Piotrek2713 Mądrala (5,500 p.)
tzn mam div > a > img

gdy wkleiłem diva działała tylko góra, ale w a nie działa
komentarz 17 stycznia przez Comandeer Guru (606,160 p.)
To dalej nic nie mówi.
komentarz 17 stycznia przez Piotrek2713 Mądrala (5,500 p.)
& a
        {
            display: block;
            color: #333;
            text-decoration: none;
            overflow: hidden;
            &:hover
            {
                color: #000;
            }
            & .game-picture
            {
                aspect-ratio: 6/5;
                object-fit: cover;
                width: 25%;
                border-radius: 7px;
                &:hover
                {
                    scale: 120%;
                }
            }
        }

 

komentarz 17 stycznia przez Comandeer Guru (606,160 p.)
https://codepen.io/Comandeer/pen/MWxpzgG – na moje oko działa: obrazek się powiększa, ale nie wystaje poza link.
komentarz 17 stycznia przez Piotrek2713 Mądrala (5,500 p.)
Ale wymiary obrazka są większe, a konkretnie szerokość
1
komentarz 17 stycznia przez Comandeer Guru (606,160 p.)

No to najłatwiej nadać rodzicowi obrazka jego wymiary + overflow: hidden i wówczas obrazek się będzie skalował tylko w ramach dostępnego miejsca.

komentarz 17 stycznia przez Piotrek2713 Mądrala (5,500 p.)
Właśnie na to wpadłem, dzięki

Podobne pytania

0 głosów
1 odpowiedź 268 wizyt
pytanie zadane 8 stycznia 2021 w HTML i CSS przez Robson04 Początkujący (260 p.)
0 głosów
1 odpowiedź 139 wizyt
pytanie zadane 13 marca 2019 w HTML i CSS przez maciej2020 Nowicjusz (160 p.)

93,115 zapytań

142,097 odpowiedzi

321,675 komentarzy

62,453 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...