Specify heigh of images in css doesn't work - html

I am currently working on a django blog. However, I am experiencing some difficulties with the size of the post thumbnails. Here's a picture:
What I marked in yellow is how the image should be filling the space. The width is fine, but the heigh isn't working well as you can see.
Here's the code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
img {
height: 100%;
width: 100%;
}
</style>
<!-- Post-->
{% for obj in object_list %}
<div class="row d-flex align-items-stretch">
{% if not forloop.first and not forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
<div class="text col-lg-7">
<div class="text-inner d-flex align-items-center">
<div class="content">
<header class="post-header">
<div class="category">
{% for cat in obj.categories.all %}
{{ cat }}
{% endfor %}
</div>
<a href="{{ obj.get_absolute_url }}">
<h2 class="h4">{{ obj.title }}</h2>
</a>
</header>
<p>{{ obj.overview|linebreaks|truncatechars:200 }}</p>
<footer class="post-footer d-flex align-items-center"><a href="#" class="author d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{ obj.author.profile_picture.url }}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{ obj.author }}</span></div></a>
<div class="date"><i class="icon-clock"></i> {{ obj.timestamp|timesince }} ago</div>
<div class="comments"><i class="icon-comment"></i>{{ obj.comment_count }}</div>
</footer>
</div>
</div>
</div>
{% if forloop.first or forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
</div>
{% endfor %}
</div>
</section>

It is <img>'s default behaivor to fill the whole width and height, often losing its aspect ratio.
The fact that it did not happen in your case, most likely is because you set object-fit: contain somewhere in your css.
You either remove object-fit: contain setting, or you can use
img {
height: 100%;
width: 100%;
object-fit: fill !important; # fill is the default value.
}

Related

Bootstrap 5 image alignment

I am working on a Django blog application and I have run into a problem with image alignment using Bootstrap 5. I am new at CSS and none of the solutions I see in SO are helping. My problem is I want the text under my images to always line up regardless of the height of the image itself. Here is a partial screen shot:
Here is the HTML code I developed:
{% extends 'base.html' %}
{% load static %}
{% block title %}Post List{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<!-- Latest Posts -->
<main class="posts-listing col-lg-8">
{% if page_obj %}
<div class="container">
<div class="row">
<!-- posts -->
{% for post in page_obj %}
<div class="post col-xl-6">
<div class="card">
<a href="{{post.get_absolute_url}}">
<img src="{{post.thumbnail.url}}" alt="..." class="img-fluid"></a>
</div>
<div class="card-body">
<div class="post-meta d-flex justify-content-between">
{% comment "" %}<div class="date meta-last"></div>{% endcomment %}
<div class="category">
{% for cat in post.categories.all %}
{{cat.title}}
{% endfor %}
</div>
</div>
<a href={{post.get_absolute_url}}>
<h3 class="h4">{{post.title}}</h3>
</a>
<p class="text-muted">{{post.content|safe | truncatechars:256 }}</p>
<footer class="post-footer d-flex align-items-center">
<a href="{% url 'show-user-profile' post.author.user.id %}" class="profile d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{post.author.profile_picture.url}}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{post.author.user.username}}</span></div>
</a>
<div class="date"><i class="icon-clock"></i>{{post.timestamp | timesince}} ago</div>
<div class="comments meta-last"><i class="icon-comment"></i>{{post.comment_count}}</div>
</footer>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p class="text-big">No Posts in this category</p>
{% endif %}
</main>
{% include 'sidebar.html' with most_recent=most_recent category_count=category_count %}
</div>
</div>
{% endblock content %}
The comments I am getting make it seem like what I am trying to do is impossible, and perhaps it is. Here is a screenshot from Adobe Lightroom that shows the concept - all the photos are placed in identically sized boxes regardless of aspect ratio. No distortion, just different size margins to fill in unused space. Now Lightroom isn't HTML but can't this be done? As I mentioned, all of the sample galleries I see use photos with the same aspect ratio, but that should not be a requirement of a gallery.
I would appreciate some help. Thanks

how to make the created post four in a row and continue it on the next line?

enter image description hereTitle: CSS styling problem
Question: how do I style four picture in a row? then the other picture will auto to next row
Background information:enter image description here
enter image description here
Question: here is my product.html. It shows the product in HTML. It becomes weird, the picture likes a stair dropping down.
{% for product in product_images %}
<div class="container" id="big">
<div class="row">
<div class="card" style="width: 18rem;">
<img src="{{url_for('static',filename='products/' + product.product_images)}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ product.product_name }}</h5>
<p class="card-text">price:${{ product.price }}</p>
</div>
</div>
</div>
{% endfor %}
<style>
.row {
display: flex;
width: 100% ;
}
.card {
width: 25%
}
</style>
here is my create product.html. i use the form create the upload the product image for the program. I can create the product image, but the product image shows in one line, I want the product image have 4 images in one line, then the 5th product will go to next line auto.
{% extends "base.html" %}
{% block body %}
<div class="content-section">
<form method="POST" enctype="multipart/form-data">
{{form.hidden_tag()}}
<fieldset class="form-group">
<legend class="border-bottom mb-4">{{ legend }}</legend>
<div class="form-group">
{{form.product_name.label(class="form-control-label")}}
{% if form.product_name.errors %}
{{form.product_name(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{%for error in form.product_name.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{form.product_name(class="form-control form-control-lg")}}
{% endif %}
</div>
<div class="form-group">
{{form.product_price.label(class="form-control-label")}}
{% if form.product_price.errors %}
{{form.product_price(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{%for error in form.product_price.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{form.product_price(class="form-control form-control-lg")}}
{% endif %}
</div>
<div class="upload-file">
{{form.product_image.label}}
<input type="file" accept="image/png, image/jpeg" name="violin_product" />
</div>
</fieldset>
<div class="form-group">
{{form.submit(class="btn btn-outline-info")}}
</div>
</form>
</div>
{% endblock body %}
Here is my base.html code
<main role="main" class="container">
<div class="row">
<div class="col-md-12">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block body %}{% endblock %}
</div>
</div>
</main>
I think you're missing the flex property on the children:
.card {
flex: 25%
}

Zurb Foundation - Centre images in blog posts

I'm new to foundation and i am building a blog based off the Simple Blog template. The images are currently appearing like this however I would like them to appear in the middle. How would I do this?
This is the current code I have for my posts:
<div id="posts" class="row medium-8 large-7 columns">
{% for i in object_list %}
<a href="{{i.get_absolute_url }}" style="color:dimgrey; text-decoration:none">
<div class="blog-post">
<h3 style="color: black;">{{ i.post_title }}<small> {{ i.post_date }}</small></h3>
<hr> {% if i.post_image %}
<img class="thumbnail" src="{{ i.post_image.url }}"> {% endif %}
<p>{{ i.post_content|linebreaks }}</p>
{% if instance.post_author.get_full_name %}
<div class="callout">
<ul class="menu simple">
<li>Written By: {{ i.post_author.get_full_name }}</li>
</ul>
</div>
{% endif %}
</a>
<br>
{% endfor %}
</div>
Thanks,
-Will
You can use the below code to align the image at the center with respect to the main class of id posts:
div.row medium-8 large-7 columns
{
position: relative;
}
div.row medium-8 large-7 columns img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
You could wrap the image in a div and use the text-center class (docs):
<div class="text-center">
<img class="thumbnail" src="{{ i.post_image.url }}">
</div>

CSS: Image pokes out of Bootstrap panel

I have the following:
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div>
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
</div>
</div>
</div>
{% endblock %}
And the image currently sticks out the bottom of the panel and makes it looks ever so odd.
The css for article image is simply:
.article-image {padding: 0; margin-bottom: 20px;}
#media(min-width: 768px){.article-image {margin-left: 20px;}}
Can anyone help understand why the image does not fit snugly within the panel?
Many thanks, Alan.
Try to put your panel content inside a div class="panel-body" and give the image dimensions. Something like this
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div class="panel-body">
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
<div>
</div>
</div>
</div>
</div>
{% endblock %}
CSS
.article-image {
padding: 0;
margin-bottom: 20px;
width: 50px; //whatever you want
height: 50px; //whatever you want
}
#media(min-width: 768px){
.article-image {
margin-left: 20px;
}
}

Why isn't this a tag clickable?

{%if collection.title == "Meat"%}
{% if collection.image %}<div class="collection-image" style="background-image: url('{{ collection.image | img_url: '1024x1024' }}'); max-height:400px; "> {% endif %}
<div class="collection-title text-center" style="padding: 50px 0;">
<h1 class="collection-text--headline title text-center" style="margin-top:30px;">{{ collection.title }}</h1>
{% if collection.description.size > 0 %}
<div class="collection-text--body text-center rte large--three-fifths push--large--one-fifth">
<h4>{{ collection.description }}</h4>
</div>
{% endif %}
</div>
<div class="text-center" style="margin-top: -40px;
padding-bottom: 100px;">
<a href="http://www.greensburymarket.com/collections/all" class="btn btn--large btn--splash uppercase sec-col-button" >Learn More</a>
</div>
{% if collection.image %}<div class="collection-image-overlay"></div>
</div>
{% endif %}
know this is a stupid question but I am stumped. tried moving things around. No idea why this doesnt work