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

Ustawienie rozmiaru obrazka, responsywnośc

VPS Starter Arubacloud
+1 głos
332 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez XavRock Obywatel (1,390 p.)

Witam 

Mam problem z obrazkiem na stronie, mianowicie gdy ustawię width="803px" height="505px" to obrazek taki pozostanie. Nie działa na niego już responsywność z bootstrapa. Czy wie ktoś jak należy zmienić kod aby wczytane zdjęcie zostało ustawione na wymagany rozmiar, i by dalej działała responsywność ?

 

{%extends 'projekt/base.html'%}
{% block content %}
{% for car in cars %}
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-10">
            <figure>
                <div class="polaroid">
                    <a href ="{% url 'car_detail' pk=car.pk %}"><img src = "{{ car.zdjecie.url }}" class="img-fluid" alt="Responsive image" width="803px" height="505px"></a>                            
                        <div class="text">
                            <h2>Nazwa: {{ car.nazwa }}</h2>
                            <h3><b>Model: {{ car.model}}</b></h3>
                            <h4><b>Segment: {{ car.segment}}</b></h4>
                            <hr>
                            <p class = "text-justify"> Silnik: {{ car.silnik.name }} </p>
                            <br>
                            <p class = "text-justify"> Rok produkcji: {{ car.rok_produkcji }} </p>
                            <br>
                            <p class = "text-justify"> Cena za godzinę: {{ car.cena_za_godzine }} </p>
                            <br>
                            <p class = "text-justify"> Dostępność pojazdu: {{ car.getDostepnosc }} </p>
                        </div>
                </div>          
            </figure>        
        </div>   
    </div>
</div>
{% endfor %}
{%endblock content%}

 

komentarz 24 kwietnia 2021 przez Marak123 Stary wyjadacz (11,190 p.)
Ogólnie aby obraz zachowywał swoją naturalną proporcję to wystarczy mu nadać tylko albo width albo height.

A możliwe ze nie jest responsywny bo bootrstrap nie może nadpisać mu szerokości ani wysokości bo zapisałeś ją przy znacziku img który ma największy priorytet styli.

https://lukasz-socha.pl/css/priorytety-w-css-czyli-id-class-i-important/
komentarz 24 kwietnia 2021 przez VBService Ekspert (251,210 p.)

Wygląda, że działa ... codepen

 

1 odpowiedź

0 głosów
odpowiedź 24 kwietnia 2021 przez XavRock Obywatel (1,390 p.)
Obraz ma się przeskalować na z góry określony rozmiar, a następnie ma się zmniejszać (być responsywny) za pomocą bootstrapa.

Podobne pytania

0 głosów
1 odpowiedź 216 wizyt
0 głosów
2 odpowiedzi 219 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)
0 głosów
3 odpowiedzi 852 wizyt
pytanie zadane 21 sierpnia 2016 w HTML i CSS przez testashur Użytkownik (520 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...