Как сделать чтобы область для картинки адаптировалась под размер картинки

@CoderReact · Регистрация: 09.12.2020

Студворк — интернет-сервис помощи студентам

Загружаю картинку для поста но место в контейнере для картинки не адаптируется по размер самой картинки. Вместо этого адаптируется картинка под ширину, тем что растягивается. Нужно чтобы сам контейнер, адаптировался под высоту и ширину картинки.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <main>
    <div class="blog-container">
        <div class="blog-header">
            <div class="blog-cover">
            <img class="blog-cover" src="" />
            </div>
        </div>
        <div class= "blog-body">
            <div class= "blog-title">
                <h1><a href="#">Lorem ipsum dolor sit</a></h1>
            </div>
             <div class="blog-text">
                <p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iusto vel mollitia id reprehenderit eveniet fugiat nihil consectetur. Repudiandae nam eveniet deserunt sit culpa ipsa aliquam, at nobis. Velit dignissimos, sit eius debitis repellat, itaque sint vel ullam veniam officiis quis?</p>
                </div>
             <ul>
                <li class="published-date">15.06.2020</li>
             </ul>
 
            </div>
            </div>
 </main>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.blog-container{
    background:#fafafa;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.2) 0 4px 2px -2px;
    font-weight: 100;
    margin: 48px auto;
    width: 50rem;
}
.blog-container a:hover{
    border-color: #ff4d4d;
    color:#ff4d4d;
}
.blog-cover{
    background:url(pg.jpg);
    background-size: cover;
    border-radius: 5px 5px 0 0;
    height: 15rem;
    box-shadow: rgba(0,0,0,0.2) 0 64px 64px 16px;
}
.blog-body{
    color: #333;
    font-weight: 100;
}
.blog-title h1 a{
    color:#333;
    font-weight: 100;
}
.blog-text ul{
    color: #4d4d4d;
}

И как место где прописывается путь к картинке перенести из css в html в данном случае:

CSS
1
2
3
4
5
6
.blog-cover{
    background:url(pg.jpg);
    background-size: cover;
    border-radius: 5px 5px 0 0;
    height: 15rem;
    box-shadow: rgba(0,0,0,0.2) 0 64px 64px 16px;

@mrtoxas · 17.12.2020, 23:46

Уберите у blog-cover высоту и ширину. И тогда размер блока будет зависеть от размеров изображения.
А у изображения убрать высоту и установить ширину в 100%. Или же, установить высоту изображению, но добавить стиль object-fit: cover;

@CoderReact · 18.12.2020, 00:28 **[ТС]**

mrtoxas, подскажите пожалуйста по поводу второго вопроса про прописывание пути, и ещё, если у всех картинок должна оставатся одна ширина которую ей задаёт контейнер и высота соответственно подгонятся по самой картинке, как это можно реализовать?

@mrtoxas · 18.12.2020, 00:37

Если вы задаете изображение посредством фона, тогда под изображение ничего подстраиваться не будет и придется задавать фиксированную высоту блока.

@CoderReact · 18.12.2020, 00:46 **[ТС]**

mrtoxas, мне не обязательно чтобы это был фон, мне главное чтобы можно было загружать фото они были все одной ширины, а по высоте подстраивался контейнер, подскажите как сделать.

@mrtoxas · 18.12.2020, 01:21

Или я не понимаю задачу, или используйте тег img, как в первом вашем примере. И тогда контейнер будет подстраиваться под изображение.

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.12.2020, 23:46
	Уберите у blog-cover высоту и ширину. И тогда размер блока будет зависеть от размеров изображения. А у изображения убрать высоту и установить ширину в 100%. Или же, установить высоту изображению, но добавить стиль object-fit: cover; 0

@CoderReact 0 / 0 / 0 Регистрация: 09.12.2020 Сообщений: 13
	18.12.2020, 00:28 [ТС]
	mrtoxas, подскажите пожалуйста по поводу второго вопроса про прописывание пути, и ещё, если у всех картинок должна оставатся одна ширина которую ей задаёт контейнер и высота соответственно подгонятся по самой картинке, как это можно реализовать? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.12.2020, 00:37
	Если вы задаете изображение посредством фона, тогда под изображение ничего подстраиваться не будет и придется задавать фиксированную высоту блока. 0

@CoderReact 0 / 0 / 0 Регистрация: 09.12.2020 Сообщений: 13
	18.12.2020, 00:46 [ТС]
	mrtoxas, мне не обязательно чтобы это был фон, мне главное чтобы можно было загружать фото они были все одной ширины, а по высоте подстраивался контейнер, подскажите как сделать. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.12.2020, 01:21
	Или я не понимаю задачу, или используйте тег img, как в первом вашем примере. И тогда контейнер будет подстраиваться под изображение. 0