Rozciąganie IMG jak temu zaradzić

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

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

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 :)

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ć :)