Изображения Galler очень большого размера, используя html - PullRequest
Новая
       5

Изображения Galler очень большого размера, используя html

0 голосов
/ 30 апреля 2020

Есть ли способ сделать эти изображения меньше? и вписаться в коробку? Я следовал в соответствии с руководством, и изображения больше. Это увеличено до 25% просмотра. Я ищу способ изменить размеры изображений, чтобы они соответствовали представлению галереи, в этом уроке у человека получился идеальный вывод типа галереи в отличие от меня xd. Это для проекта django, и заранее спасибо: )

Это обычный увеличенный вид:

enter image description hereenter image description here

html код: 

{% extends 'portofolio/base.html' %}
{% load static %}
{% block content %}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
    <link rel="stylesheet" href="{% static "portofolio/css/photogallery.css" %}">
    <body>
        <h1 style="margin-top: 70px;">Image Gallery</h1>
        <div id="jLightroom" class="jlr">
            <a href="{% static "portofolio/images/1.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/1.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/2.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/2.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/3.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/3.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/4.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/4.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/5.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/5.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/6.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/6.jpg" %}">
            </a>

            <a href="{% static "portofolio/images/7.jpg" %}" data-lightbox="lb1" class="jlr_item">
                <img src="{% static "portofolio/images/7.jpg" %}">
            </a>
        </div>
    </div>
    </body>
    <script src="{% static 'portofolio/js/jquery.min.js' %}"></script>
    <script src="{% static 'portofolio/js/imagesloaded.pkgd.min.js' %}"></script>
    <script src="{% static 'portofolio/js/lightbox.min.js' %}"></script>
    <script src="{% static 'portofolio/js/jquery.lightroom.js' %}"></script>

    <script type="text/javascript">
        $("#jLightroom").lightroom({
            image_container_selector: ".jlr_item",
            img_selector: "img.jlr_img",
            img_class_loaded: "jlr_loaded",
            img_space: 5,
            img_mode: 'min',
            init_callback: function (elem) {
                $(elem).removeClass("gray_out")
            }
        }).init();
    </script>

{% endblock %}

css код: 

.jlr {
    font-size: 0;
}

.jlr div {
    font-size: 1rem;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
}

.jlr div img {
    height: 100px;
    opacity: 0;

}

.jlr img.jlr_loaded {
     -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    opacity: 1;
}

1 Ответ

1 голос
/ 30 апреля 2020

К счастью, я делал что-то вроде этого, и я использовал сетку, это фактически помогло мне поместить изображения рядом друг с другом в одну строку в поле c, как на фотографии ниже, вы можете открыть ссылку под код и увидеть вывод. [Сетка для изображений] [1]

HTML: 

    <div class='l-grid'>
      <div class='c-project'>
        <img src='./images/fulls/01.jpg'>
        <div>
          <h4>Tower</h4>
        </div>
      </div>
      <div class='c-project'>
        <img src='./images/fulls/02.jpg'>
        <div>
          <h4>Water fall</h4>
        </div>
      </div>
      <div class='c-project'>
        <img src='./images/fulls/03.jpg'>
        <div>
          <h4>River</h4>
        </div>
      </div>
      <div class='c-project'>
        <img src='./images/fulls/04.jpg'>
        <div>
          <h4>Sea</h4>
        </div>
      </div>
      <div class='c-project'>
        <img src='./images/fulls/06.jpg'>
        <div>
          <h4>Beautiful face</h4>
        </div>
      </div>
    </div>

CSS: 

.l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 0.5rem; /*Here you can control the spacing between the images*/
}
.c-project img {
    width: 100%;
}


  [1]: https://i.stack.imgur.com/6rkbs.jpg
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...