Изображение выходит за границы при уменьшении ширины сайта
Когда ширина ровна 610px
все хорошо, но после картинка выходит за пределы.
Пробовал с помощью media
-запроса уменьшить ширину картинки, но почему-то не уменьшалось.
body {
margin: 0;
padding: 0;
background-color: black;
}
#start {
display: flex;
flex-wrap: wrap;
gap: 200px;
margin-bottom: 200px;
justify-content: center;
}
#main_img {
width: 900px;
margin-top: 20px;
}
#title {
text-align: center;
flex-grow: 1;
}
h1 {
font-size: 70px;
font-family: 'Courier New', Courier, monospace;
margin-bottom: 0;
color: chocolate;
}
#org_title {
margin-top: 0;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: chocolate;
}
#navigation {
display: flex;
justify-content: center;
color: black;
background-color: chocolate;
height: 400px;
flex-basis: 300px;
border: 6px double black;
border-radius: 14px;
}
.characters {
text-align: center;
}
#nav_list {
display: flex;
flex-direction: column;
padding: 0;
text-align: center;
list-style: none;
gap: 40px;
}
a {
font-weight: 600;
color: black;
font-size: 24px;
font-family: 'Courier New', Courier, monospace;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (max-width: 2000px) and (min-width: 1411px) {
#navigation {
position: relative;
top: 300px;
right: 150px;
}
}
@media (max-width: 960px) {
#start {
flex-direction: column;
align-items: center;
}
#navigation {
flex-basis: 300px;
width: 300px;
}
#main_img {
transition: all 200ms;
width: 600px;
}
#last_img {
width: 600px;
}
}
@media (max-width: 632px) {
.description_img {
width: 400px;
}
.main_img {
width: 400px;
}
.last_img {
width: 400px;
}
}
.characters {
font-size: 30px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
main {
display: flex;
flex-wrap: wrap;
gap: 250px;
flex-direction: column;
}
/* #Rintaro_Okabe {
width: 800px;
margin-left: 50px;
}
#Kurisu_Makise {
text-align: right;
width: 800px;
align-self: flex-end;
margin-right: 50px;
}
#Itaru_Hasida {
width: 800px;
margin-left: 50px;
}
#Mayuri_Sina {
text-align: right;
width: 800px;
align-self: flex-end;
margin-right: 50px;
} */
#Rintaro_Okabe,
#Itaru_Hasida {
display: flex;
width: 80%;
flex-direction: column;
margin: auto;
align-items: center;
line-height: 36px;
}
#Kurisu_Makise,
#Mayuri_Sina {
display: flex;
width: 80%;
flex-direction: column;
margin: auto;
align-items: center;
line-height: 36px;
}
.name {
color: chocolate;
font-size: 35px;
}
.description {
color: chocolate;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
#quotes {
color: chocolate;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
.quote_li {
color: chocolate;
font-style: italic;
}
.description_img {
width: 600px;
margin-bottom: 20px;
border: 4px solid chocolate;
border-radius: 15px;
}
footer {
margin-top: 200px;
}
#last_img {
display: block;
margin: 0 auto;
}
#begin {
display: block;
text-align: center;
font-size: xx-large;
font-family: 'Courier New', Courier, monospace;
flex-basis: 100%;
color: chocolate;
margin: 100px 0px;
}
#begin:hover {
text-decoration: underline;
}
<header id="start">
<div id="title">
<h1>Врата Штейна</h1>
<p id="org_title">Steins Gate</p>
<img id="main_img" src="https://picsum.photos/1200/600?random=1" alt="" />
</div>
<div id="navigation">
<div id="main_characters">
<h2 class="characters">Главные герои</h2>
<ul id="nav_list">
<li class="nav_li"><a href="#Rintaro_Okabe">Ринтаро Окабэ</a></li>
<li class="nav_li"><a href="#Kurisu_Makise">Курису Макисэ</a></li>
<li class="nav_li"><a href="#Itaru_Hasida">Итару Хасида</a></li>
<li class="nav_li"><a href="#Mayuri_Sina">Маюри Сина</a></li>
</ul>
</div>
</div>
</header>
<main>
<article id="Rintaro_Okabe">
<h2 class="name">Ринтаро Окабэ</h2>
<img class="description_img" src="https://picsum.photos/1200/600?random=2" alt="Rintaro_Okabe" />
<p class="description">
Восемнадцатилетний студент первого курса Токийского электротехнического университета, но уже ощущает себя не только гениальным, но и, как это принято у гениев, — сумасшедшим учёным. Доказывает это он рассказами о таинственной «организации», которая неусыпно
следит за студентом. Основатель «Лаборатории гаджетов будущего». Любит поговорить по телефону сам с собой и посмеяться как настоящий безумец. Его не всегда устраивает собственное имя, и он зовёт себя Кёма Хооин (яп. 鳳凰院 凶真), что можно перевести
как «Феникс жестокой реальности». А вот его подруга детства Маюри (позже к ней присоединяется Дару) называет гения «Окарин», просто соединив первые буквы его имени и фамилии. Практически не выходит из своей «Лаборатории гаджетов будущего», поэтому
его легко издалека узнать по белому лабораторному халату.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Это выбор Врат Штейна!” – Коронная фраза Окабе.</li>
<li class="quote_li">“Я великий безумный учёный, Хооин Кёма!”</li>
<li class="quote_li">“Гениальная извращенка” – Окабе говорит Курису.</li>
<li class="quote_li">“Это интеллектуальный напиток для избранных” – Окабе о Dr. Pepper.</li>
<li class="quote_li">“Эм… Hey mister, I am mad scientist. It’s soo COOOL! Sonuvabitch.” – Окабе торговцу значками, на ломаном английском.</li>
</ul>
</article>
<article id="Kurisu_Makise">
<h2 class="name">Курису Макисэ</h2>
<img class="description_img" src="https://picsum.photos/1200/600?random=2" alt="Kurisu Makise" />
<p class="description">
Член «Лаборатории гаджетов будущего» № 004. Возраст — 18 лет. Талантливая исследовательница неврологии в американском университете. Когда ей было 17 лет, её исследование было опубликовано во всемирно-известном журнале «Science» (в аниме название заменено
на «Sciency»). Окабэ часто называет её ассистентом или придуманным им прозвищем — Кристина (саму Курису это очень раздражает). На первый взгляд — спокойная девушка, краснеет, если кто-то незнакомый приближается к ней слишком близко, но в душе —
полная противоположность: однажды заставила Окарина стоять на коленях три часа подряд, при этом грозясь ударить его книгой. Всегда стоит на своём, не любит проигрывать и не любит, когда кто-то пытается управлять ею.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Произошло что-то серьёзное, если ты зовёшь меня по имени” – Курису говорит Окабе.
</li>
<li class="quote_li">“Чувства людей – воспоминания, которые преодолели время.”</li>
<li class="quote_li">“Время летит так быстро. Сейчас я согласна с Эйнштейном. Время течёт быстрее или медленнее в зависимости от восприятия. Теория относительности такая романтичная. И такая грустная.”
</li>
<li class="quote_li">(После поцелуя Окабе) ”Есть научное объяснение этого! Яркие воспоминания, например, первый поцелуй, сохраняются в гиппокампе, и их труднее забыть.”</li>
<li class="quote_li">“Скажи правильно, Хооуин Трусы-Кёма!” – Курису говорит Окабе</li>
</ul>
</article>
<article id="Itaru_Hasida">
<h2 class="name">Итару Хасида</h2>
<img class="description_img" src="https://picsum.photos/1200/600?random=4" alt="Itaru Hasida" />
<p class="description">
Известный под прозвищем друзей Дару — девятнадцатилетний подросток, который учится на первом курсе Токийского электротехнического университета. Также является членом «Лаборатории гаджетов будущего», занесённый в список под номером «003», где его «специализация»
— хакерские взломы. Ведь, несмотря на юный возраст, Дару отлично разбирается и в программном, и в аппаратном обеспечениях компьютера. Но эти умения никак не помогают ему в личной жизни. Неуверенный в себе с излишним весом, Дару просто боится людей
и общается только с помощью компьютера. Для моральной поддержки выбрал культуру отаку. Дару не социопат и не опасен для общества. Он самостоятельно выбирает нетрадиционный образ жизни вне активного взаимодействия с другими людьми. Он сам навешивает
на себя ярлык отаку. Это юношеский протест и своеобразный вызов, за которым на самом деле кроется ранимое сердце. И если бы нашёлся неравнодушный человек, он бы смог расшевелить Дару, выведя его из берлоги в люди.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Это не имеет никакого смысла!.. Умри! Черт возьми!”</li>
<li class="quote_li">“Human is dead… Mismatch.”</li>
<li class="quote_li">“Можешь сказать: 'Да кто будет есть твой банан, извращенец?'”- Дару говорит Курису.
</li>
<li class="quote_li">“Скажи: 'Твой банан мягкий'.” – Дару говорит Маюри.</li>
</ul>
</article>
<article id="Mayuri_Sina">
<h2 class="name">Маюри Сина</h2>
<img class="description_img" src="https://picsum.photos/1200/600?random=5" alt="Mayuri Sina" />
<p class="description">
Девушка, в свои шестнадцать лет ставшая членом «Лаборатории гаджетов будущего» под номером «002», сразу за её главой. А всё потому, что она неизменная подруга детства Ринтаро, и за это имеет право называть его лично придуманным именем «Окарин». Себя же
называет «Маюси». Немного легкомысленна, что может быть следствием её увлечения — косплея, для которого она любит придумывать и шить разнообразные костюмы. Кроме того, Ринтаро про себя шутливо удивляется: «Похоже, у неё действительно ветер в голове».
Но, по его же словам, несмотря на всю её несерьёзность и глуповатость, Маюри способна, как никто другой, подбодрить и будет рядом, если тебе это нужно. Не сидит ни у кого на шее, самостоятельно подрабатывает в мэйд-кафе, где официантки наряжены
в костюмы горничных.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Мы должны устроить мир во всём мире. Например, дать каждому по плюшевому Упе…” –Маюри придумывает желание для Ди-мейла.</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
</ul>
</article>
</main>
<footer>
<img id="last_img" src="https://picsum.photos/1200/600?random=6" alt="logo" />
<a id="begin" href="#start">Начало</a>
</footer>
Ответы (2 шт):
Автор решения: HappyPM
→ Ссылка
Для класса description_img
не задавайте строго ширину.
Поставьте:
width: 100%;
max-width: 400px;
где 400px это будет ограничитель на нужном разрешении. т.е. где стоит 600px пишите 600px
Заметил что у Вас еще есть id main_img
и др. принцип тот же для всех картинок. Ширина ставится 100%, а максимальная ширина уже ограничивается.
Автор решения: Andrei Fedorov
→ Ссылка
Тут не нужны никакие медиа-запросы.
#last_img {
width: 100%;
height: auto;
}
И все. Изображение будет не шире своего родительского элемента при любых размерах окна браузера.