html – iPhone picture stretching in residence web page

November 22, 2023

1

my django web site’s homepage appears high-quality on virtually all gadgets however on the newer iphones, the picture contained in the “image-container” is VERY stretched out. To the purpose it makes the web page look distorted and ugy. This downside has been occuring on the foremost iphones comparable to iphone 10,11,12,13,14 and 15.


{% extends 'common_anime_chat/base.html' %}
{% load static %}
{% block adsense %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?consumer=ca-pub-4760839642199389"
     crossorigin="nameless"></script>
{% endblock adsense %}
{% block stylesheet %}
<hyperlink rel="stylesheet" sort="textual content/css" href="{% static 'index.css' %}">
{% endblock stylesheet %}
{% block title %}
<title>Residence</title>
{% endblock title %}
{% block content material %}
<part class="content-section" fashion="top: 23%;">
    <div class="content-container">
      <div class="image-container">
        <img src="{% static 'anime-girl.png' %}" alt="Picture" fashion="show: block;">
      </div>
      <div class="text-container" fashion="width: 100%;">
        <h2 fashion="width: 100%;">Begin Chat</h2>
        <p fashion="width: 100%;">Click on on the Begin Chat button</p>
        <a href="{% url 'start_chat' %}">
          <button class="start-chat-btn">Begin Chat</button>
        </a>
      </div>
    </div>
</part>
{% endblock content material %}

The next is the CSS code for the template:


/* .content-section {
  background: #000;
  colour: #fff;
  padding: 50px;
}

.content-container {
  show: flex;
flex-direction: row;
align-items: heart;
  width: 90%;
}


.image-container {
align-items: flex-start;
  flex-basis: 70%;
  margin-right: 30px;
  overflow: hidden;
  top: 100%;
}

.image-container img {
object-fit: cowl;
  width: 100%;
  top: auto;
  max-width: 100%;
}

.text-container {
  flex-basis: 50%;
}

.text-container h2 {
  font-size: 24px;
}

.text-container p {
  margin-top: 10px;
  font-size: 18px;
}

.start-chat-btn {
  padding: 10px 20px;
  background: #555;
  border: none;
  colour: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

 */

 .content-section {
  background: #000;
  colour: #fff;
  padding: 50px;
}

.content-container {
  show: flex;
  align-items: heart;
  width: 90%;
}

.image-container {
  flex-basis: 70%;
  margin-right: 30px;
  top: 100%;
}

.image-container img {
  top: 100%;
  max-width: 100%;
}

.text-container {
  flex-basis: 50%;
}

.text-container h2 {
  font-size: 24px;
}

.text-container p {
  margin-top: 10px;
  font-size: 18px;
}

.start-chat-btn {
  padding: 10px 20px;
  background: #555;
  border: none;
  colour: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

/* Media Queries */
@media display and (min-width: 768px) {
  .text-container h2 {
    font-size: 28px;
  }

  .text-container p {
    font-size: 22px;
  }
}

@media display and (min-width: 1024px) {
  .text-container h2 {
    font-size: 32px;
  }

  .text-container p {
    font-size: 26px;
  }
}

In case you wish to take a look at the location on iPhone, the url is: https://aniconnect.org

Supply hyperlink