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

Ustawienie rozmiaru obrazka, responsywnośc

+1 głos
130 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez XavRock Obywatel (1,290 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 (10,980 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 Mędrzec (163,370 p.)

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

 

1 odpowiedź

0 głosów
odpowiedź 24 kwietnia 2021 przez XavRock Obywatel (1,290 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ź 75 wizyt
0 głosów
2 odpowiedzi 134 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Bywalec (2,880 p.)
0 głosów
3 odpowiedzi 571 wizyt
pytanie zadane 21 sierpnia 2016 w HTML i CSS przez testashur Użytkownik (520 p.)

87,976 zapytań

136,557 odpowiedzi

304,510 komentarzy

58,337 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...