Ustawienie rozmiaru obrazka, responsywnośc

Question

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%}

 

Comments

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/

---

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

 

Answer 1

Obraz ma się przeskalować na z góry określony rozmiar, a następnie ma się zmniejszać (być responsywny) za pomocą bootstrapa.