在社交媒体上的帖子内容中显示多张图片。

huangapple go评论91阅读模式
英文:

Display multiple images in one post content on social media

问题

我正在使用Django、HTML、CSS和jQuery制作一个社交网络网站。

<div class="ui fluid image">
    {% if obj.get_images.count > 0 %}
        <div class="image-container">
            {% for img in obj.get_images.all %}
                <div class="">
                    <img src="{{ img.image.url }}" class="post-image">
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>

我已经可以将图片上传到数据库并在帖子中显示,但我想稍微整理一下,就像这样。我该如何使用HTML和CSS实现这个效果?

英文:

I'm making a social network website with django, html, css, jquery.

       &lt;div class=&quot;ui fluid image&quot;&gt;
            {% if obj.get_images.count &gt; 0 %}
                &lt;div class=&quot;image-container&quot;&gt;
                    {% for img in obj.get_images.all %}
                        &lt;div class=&quot;&quot;&gt;
                            &lt;img src=&quot;{{ img.image.url }}&quot; class=&quot;post-image&quot;&gt;
                        &lt;/div&gt;
                    {% endfor %}
                &lt;/div&gt;
            {% endif %}
        &lt;/div&gt;

I already can upload images to database and display it in my post but I want to organize it a little bit just like this. How can I do that with html and css?

答案1

得分: -1

使用HTML和CSS创建图像网格,可以利用主容器的display:flex属性和display:grid来排列图像。以下是一个示例实现:

HTML:

<div class="main">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
    repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
    ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
    similique suscipit!
  </p>
  <div class="grid">
    <div class="child1">
      <img src="image-url-1.jpg" alt="Image 1" />
    </div>
    <div class="child2">
      <img src="image-url-2.jpg" alt="Image 2" />
    </div>
    <div class="child3">
      <img src="image-url-3.jpg" alt="Image 3" />
    </div>
    <div class="child4">
      <img src="image-url-4.jpg" alt="Image 4" />
    </div>
  </div>
</div>

CSS (index.css):

* {
  box-sizing: border-box;
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

img {
    width: 100%;
    height: auto;
  object-fit: cover;
}

.child1 {
  width: 100%;
  grid-area: 1 / 1 / 2 / 4;
}

.child2 {
  width: 100%;
  grid-area: 2 / 1 / 3 / 2;
}
.child3 {
  width: 100%;
  grid-area: 2 / 2 / 3 / 3;
}
.child4 {
  width: 100%;
  grid-area: 2 / 3 / 3 / 4;
}

这段代码创建了一个响应式的图像网格,其中四个图像按照3列的布局排列。主容器使用了display:flex属性,而图像网格本身应用了display:grid。CSS样式确保图像在其容器内正确大小和适应。

请随意用自己的内容替换图像的URL和alt文本。您可以通过修改grid-template-columns属性和调整每个图像容器的网格区域来调整网格布局。

根据您的具体要求和设计偏好,记得根据需要调整代码。

英文:

To create an image grid using HTML and CSS, you can utilize the display:flex property for the main container and display:grid for arranging the images. Here's an example implementation:

HTML:

&lt;div class=&quot;main&quot;&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
    repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
    ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
    similique suscipit!
  &lt;/p&gt;
  &lt;div class=&quot;grid&quot;&gt;
    &lt;div class=&quot;child1&quot;&gt;
      &lt;img src=&quot;image-url-1.jpg&quot; alt=&quot;Image 1&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;child2&quot;&gt;
      &lt;img src=&quot;image-url-2.jpg&quot; alt=&quot;Image 2&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;child3&quot;&gt;
      &lt;img src=&quot;image-url-3.jpg&quot; alt=&quot;Image 3&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;child4&quot;&gt;
      &lt;img src=&quot;image-url-4.jpg&quot; alt=&quot;Image 4&quot; /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

CSS (index.css):

* {
  box-sizing: border-box;
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

img {
    width: 100%;
    height: auto;
  object-fit: cover;
}

.child1 {
  width: 100%;
  grid-area: 1 / 1 / 2 / 4;
}

.child2 {
  width: 100%;
  grid-area: 2 / 1 / 3 / 2;
}
.child3 {
  width: 100%;
  grid-area: 2 / 2 / 3 / 3;
}
.child4 {
  width: 100%;
  grid-area: 2 / 3 / 3 / 4;
}

This code creates a responsive image grid with four images arranged in a 3-column layout. The display: flex property is used for the main container, while display: grid is applied to the image grid itself. The CSS styling ensures that the images are properly sized and fitted within their containers.

Feel free to replace the image URLs and alt text with your own content. You can adjust the grid layout by modifying the grid-template-columns property and adjusting the grid areas for each image container.

Remember to adapt the code according to your specific requirements and design preferences.

huangapple
  • 本文由 发表于 2023年8月9日 15:56:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/76865694.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定