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

question-closed Rozciąganie IMG jak temu zaradzić

Object Storage Arubacloud
0 głosów
1,106 wizyt
pytanie zadane 28 sierpnia 2015 w HTML i CSS przez mitelak Pasjonat (23,330 p.)
zamknięte 28 października 2015 przez Eryk Andrzejewski

Witajcie, mam pewien problem, który najlepiej odda ten screen
Obrazek
Chodzi o to, aby <img> rozciągało się na 100% szerokości i 200px wysokości jednocześnie ucinając nadmiar.
 

<img src="images/slide1.jpg">
img{
    height: 200px;
    width: 100%;
}

W jaki sposób mogę wykonać takie coś, czy będę musiał użyć css i bacground-image, czy dałoby się to zrobić przy pomocy img?

komentarz zamknięcia: Problem rozwiązany

2 odpowiedzi

+2 głosów
odpowiedź 28 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
wybrane 28 sierpnia 2015 przez mitelak
 
Najlepsza

Jeśli podajesz szerokość na 100%, a wysokość na 200px to logiczne jest, że img się rozciągnie wink

Jeśli chcesz, aby obrazek faktycznie miał wysokość 200px, a nie 100% to najbardziej rozsądnie jest w programie graficznym np. Gimp przyciąć go do 200px (Albo ogarnij sobie w CSS to LINK)

komentarz 28 sierpnia 2015 przez mitelak Pasjonat (23,330 p.)
Tylko, że edytując obrazek do 200px wysokości będzie mi się automatycznie (zakładam że nie ustalam height) zmieniać zależnie od szerokości co też mnie nie satysfakcjonuje, ale jeżeli nie zrobię tego z img postaram się coś ogarnąć z background image, a jak nie trudno zrobie sztywno obrazek :)
komentarz 28 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
Nie rozumiem tego co napisałeś...

Jeśli przytniesz obrazek do 200px wysokości to ZAWSZE BĘDZIE MIAŁ 200px WYSOKOŚCI i proporcji nie zmieni. W HTML ustawiasz w tedy 200px wysokości i obrazek nie będzie zniekształcony.

Podeślij zdjęcie to ci je obrobię i podeślę :)
komentarz 28 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)

Aha już rozumiem :P

W taki sposób będzie ciężko i responsywność będzie kulała. Nikt nie robi BG, używając tagu img. Zrób zwykłego diva z background-image cover 

Zapoznaj się z tym LINK (nic nie ma prawa się zniekształcać)

komentarz 28 sierpnia 2015 przez mitelak Pasjonat (23,330 p.)
Akurat grafiką zajmuję się dłużej niż kodzeniem więc dam sobie radę na pewno :D
A chodzi mi o to że przy przycięciu do 200px wysokości szerokość też mam stałą, jezeli ustawie że szerokość to 100% to wysokość będzie mi się zmienić automatycznie, a jak ustawie na sztywno to i tak będzie się zniekształcać (tylko lżej) :)
komentarz 28 sierpnia 2015 przez mitelak Pasjonat (23,330 p.)
No czyli jak myślałem trzeba w css, co prawda ma być to taki nietypowy slider, ale dam radę zmieniając w js id albo klase, no zobaczymy dzięki za odpowiedź :D
komentarz 28 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
Tak będzie zawsze, bo używasz tagu img, który jest problematyczny i nadaje się tylko do zwykłych article (czasem do loga). Ogarnij sobie tematykę divów z atrybutem background-image i coverem.
komentarz 28 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
Możesz określić diva na sztywno, szerokość 100% i wysokość 200px. Następnie atrybut z background-image. Spróbuję coś ogarnąc :)
komentarz 28 sierpnia 2015 przez mitelak Pasjonat (23,330 p.)
No to moje img wynika z tego, że większość sliderów jakie na necie widziałem używają obrazków w img, ale zabieram się już za css jak mi się uda to mogę napisać nawet :P

edit. i już po kłopocie w css :)
0 głosów
odpowiedź 28 sierpnia 2015 przez SebastianGomularz Dyskutant (9,370 p.)
Jakie są wymiary obrazka?
komentarz 28 sierpnia 2015 przez mitelak Pasjonat (23,330 p.)
bardziej istotne są proporcje, załóżmy że jest to 1280x720
swoją drogą zrobiłem to już w css (bacground-image), ale jeżeli masz pomysł na img możesz pisać :)

Podobne pytania

0 głosów
3 odpowiedzi 751 wizyt
pytanie zadane 8 marca 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)
+1 głos
1 odpowiedź 438 wizyt
pytanie zadane 15 maja 2018 w HTML i CSS przez Newaz Użytkownik (880 p.)
0 głosów
1 odpowiedź 1,038 wizyt
pytanie zadane 28 lutego 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)

92,761 zapytań

141,685 odpowiedzi

320,485 komentarzy

62,105 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...