#html #css #image #responsive
Вопрос:
по какой-то причине изображения, которые я пытался разместить на своем сайте, отказываются правильно стилизоваться. Я пытался добавить радиус границы и сделать изображение реактивным, но обнаружил, что независимо от того, что изображение не будет стилизовано. Он загружается на страницу, но не имеет никакого примененного CSS.
Редактировать: Меня попросили предложить всю страницу целиком, поэтому я отредактировал ее, чтобы она была у меня. Если кто-нибудь может взглянуть на этот код и сказать мне, как я могу заставить свои фотографии округлять границы и выравнивать по середине без использования классов, я был бы очень признателен.
/* Add a background color with some padding to the body */
body {
background: #383F51;
font-family: Geneva, sans-serif;
}
/* Header and Blog Title */
header {
background: #91c7b1;
margin-top: 15px;
padding: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
header h1 {
font-size: 42px;
font-family: "Electrolize", sans-serif;
}
header p {
font-style: italic;
font-size: 24px;
}
/* navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
display: block;
height: auto;
width: auto;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* navigation bar links */
nav a {
float: left;
color: white;
text-align: center;
font-size: 20px;
padding: 10px;
margin-left: 5px;
text-decoration: underline;
font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
flex: 1;
}
.leftcolumn {
flex: 5;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.row {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;}
main > .row {
display: flex;
}
@media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
/* images (work in progress at the moment) */
/* Post layout for articles and additional areas */
.post {
display: block;
background-color:white;
padding: 20px;
margin-top: 10px;
border-style: solid;
border-color: #91c7b1;
border-radius: 20px;
}
article h2, article h2 a, .post h2 {
font-size: 24px;
text-decoration: none;
color: #533A71;
}
article h5{
font-size: 16px;
}
.post p {
line-height: 1.5em;
font-size: 16px;
}
img {
display: block;
border-radius: 20px;
max-width: 100%;
height: auto;
}
ul {
line-height: 25px;
font-size: 18px;
font-style: italic;
list-style-type: none;
padding: 0;
}
ul li:not(:last-child) {
margin-bottom: 10px;
}
/* Footer */
footer {
color: black;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
background-color: #91c7b1;
text-align: center;
font-size: 18px;
border-radius: 20px;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Project Incredible Indie Games</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolizeamp;display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- End Header -->
<!-- Begin Navigation -->
</header>
<nav role="navigation">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="Ori-and-The-Blind-Forest.html">Reviews</a>
<a href="Contact-form.html">Contact</a>
</nav>
<!-- End Navigation -->
<!-- End Header -->
<!-- Begin Main Content -->
<main role="main">
<div class="row">
<!-- Begin Blog Posts -->
<section class="leftcolumn">
<article class="post" role="article">
<h2> <a href="Ori-and-The-Blind-Forest.html">Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</a></h2>
<h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
<figure>
<img src="ori-and-the-blind-forest.jpg" alt="Ori and The Blind Forest Game Cover" aria-label="Ori and The Blind Forest Game Cover">
<figcaption>Ori and The Blind Forest Game Cover </figcaption>
</figure>
<p>Ori and the Blind foret tells a story of courage, love, and sacrifice through a beautifully displayed and fluid Metroidvania style platformer. Click on this article's title to see what makes this game such an enjoyable experience!</p>
</article>
<article class="post">
<h2>Ori and The Will of the Wisps</h2>
<h5>Sep 23, 2021</h5>
<p>This sequel to Ori and the Blind Forest both builds on the story of the previous game and expands gameplay by including new skills and weapons. Depite the improvement, this game keeps the charm of Ori and is sure to please any fan.</p>
</article>
</section>
<!-- End Blog Posts -->
<!-- Begin Sidebar -->
<aside class="rightcolumn" role="complementary">
<section class="post">
<h2>About Me</h2>
<p>Well hello there, my name is Abby Lake and I humbly welcome you to 'Project Incredible Indie Games'</p>
<p> To learn more, please click on the 'about' tag on the upper navigation bar </p>
</section>
<section class="post">
<h2>Upcoming Posts</h2>
<ul>
<li> Endless Ocean </li>
<li> Endless Ocean: Blue World </li>
<li> Rime </li>
</ul>
</section>
</aside>
<!--End Sidebar -->
</div>
</main>
<!--End Main -->
<!--Begin Footer-->
<footer class="footer" role="contentinfo">
<p>Blog Created by: Abby Lake</p>
</footer>
<!--End Footer-->
</body>
</html> Комментарии:
1. обратитесь к своим файлам изображений с ./[имя файла], чтобы избежать какой-либо путаницы
2. Пожалуйста, не могли бы вы превратить свой код в рабочий фрагмент, который мы можем запустить, потому что, когда я попробовал его в своей собственной системе с предоставленным мной изображением, я не увидел никаких проблем. единственный применяемый CSS (радиус границы) работал нормально, так что должна быть какая-то другая проблема.
Ответ №1:
Если ваш другой стиль работает хорошо, вы можете создать стиль класса для изображения, например
.img-article {
display: block;
border-radius: 20px;
max-width: 100%;
height: auto;
} <img class="img-article" src="ori-and-the-blind-forest.jpg" alt="Ori and The Blind Forest Game Cover" aria-label="Ori and The Blind Forest Game Cover"> Комментарии:
1. Мне сказали для этого задания ограничить количество классов, которые мы используем, и я хотел попытаться избежать использования класса для этого, если это возможно. Будет ли хорошая альтернатива?