Не меняется размер img в HTML

Делаю сайт на DJango. Загружаю картинку любого размера на сайт через админ панель. Мне надо чтоб на одной странице размер был 970 на 647, на второй 1280 на 720, а на другой оригинальный размер котрый был при загрузке.

models.py

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User
from django.urls import reverse
from ckeditor_uploader.fields import RichTextUploadingField

from django import forms


# creating model manager
class PublishedManager(models.Manager):
    def get_queryset(self):
        return super(PublishedManager,self).get_queryset().filter(status='published')


# post model
class Post(models.Model):
    STATUS_CHOICES = (
    ('draft', 'Draft'),
    ('published', 'Published'),
    )

    title = models.CharField(max_length=250)
    slug = models.SlugField(max_length=250, unique_for_date='publish')
    author = models.ForeignKey(User,on_delete=models.CASCADE,related_name='home_posts')

    body = RichTextUploadingField()
    image = models.ImageField(upload_to='featured_image_post/%Y/%m/%d/') #this

    publish = models.DateTimeField(default=timezone.now)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    status = models.CharField(max_length=10,choices=STATUS_CHOICES,default='draft')

    class Meta:
        ordering = ('-publish',)
        def __str__(self):
            return self.title

    objects = models.Manager() # The default manager.
    published = PublishedManager() # Our custom manager.

    def get_absolute_url(self):
        return reverse('home:post_detail',args=[self.slug])

views.py

from django.views.generic import ListView
from .models import Post, News
from django.shortcuts import render, get_object_or_404
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.http import JsonResponse

def post_list(request):
    posts = Post.published.all()

    paginator = Paginator(posts, 20) # 10 posts in each page
    page = request.GET.get('page')
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
          # If page is not an integer deliver the first page
        posts = paginator.page(1)
    except EmptyPage:
          # If page is out of range deliver last page of results
        posts = paginator.page(paginator.num_pages)

    return render(request,'post_list.html',{'posts':posts, page:'pages'})

post_list.html

<div class="content-lg container">
    <div class="row margin-b-40">
      <div class=container6>
        <h2>All posts</h2>
      </div>
    {% for post in posts %}


          <div class="col-sm-6 sm-margin-b-50">
              <br>
              <div class="margin-b-20">
                    <div class="wow zoomIn" data-wow-duration=".3" data-wow-delay=".1s">

                      <div class="img_wrap">
                          <img class="img-responsive featured-image-list" alt="{{post.title}}" src="{{ post.image.url }}">
                      </div>

                    </div>
              </div>
              <h4><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h4>
              <p href="{{ post.get_absolute_url }}">{{ post.body|safe|striptags|truncatechars:100 }}</p>
              <h6 href="{{ post.get_absolute_url }}">Published {{ post.publish.date }} by <strong>{{ post.author }}</strong></h6>
              <a class="link" href="{{ post.get_absolute_url }}">Read More</a>
              <hr/>
              <br>
          </div>

    {% endfor %}
      </div>
  </div>

css_main.css

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }

div.container6 p {
  margin: 0 }

  div.container7 {
    height: 10em;
    display: flex;
    align-items: left;
    justify-content: left }

  div.container7 p {
    margin: 0 }

article img{
        max-width: 100% !important;
        height: auto !important;
        border-radius: .25rem!important;
    }

.featured-image-list{
        object-fit: cover;
    }

    figure.percent_size {
     width: 70%; /* Ширина */
     max-width: 5000px;
     float: left; /* Выстраиваем элементы по горизонтали */
     border-radius: 5px; /* Радиус скругления */
     padding: 2%; /* Поля */
    }

div.padding_two_percent {
  padding-left: 3%;
}


.img_wrap {
  width: 300px;
  height: 200px;
  border-style: solid;
}

.img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

Вернуться на верх