Не меняется размер 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;
}