#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Итак, я пытаюсь создать веб-сайт для школьного проекта, и изображение ведет себя как-то странно. Я понятия не имею, как объяснить, что происходит, честно говоря, я добавлю несколько скриншотов.
На первом рисунке браузер работает во весь экран (1920x1080px), на втором окно немного меньше.
Я думаю только о некоторых медиа-запросах, чтобы исправить это, при определенных разрешениях оно должно масштабироваться по-другому. Но я чувствую, что делаю что-то не так и что я должен исправить это в первую очередь.
/*reset.css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*GENERAL STYLES*/
body {
width: 100%;
color: #fff;
text-rendering: optimizeLegibility;
font-size: 10px !important;
overflow-x: hidden;
}
#container-site {
font-size: 10px !important;
}
/* UPPER SECTION */
#upper-section {
background-color: #001a33 !important;
font-size: 16px;
height: 85vh;
position: relative;
}
/*NAVBAR STYLING */
.navbar-custom {
padding: 3rem 0;
max-width: 1650px;
margin: 0 auto;
}
.navbar-upper-section {
margin-left: 1rem;
}
.navbar-nav > .nav-item {
font-weight: 100;
margin-left: 1.2rem;
}
.navbar-brand {
width: 195px;
}
.logo-roboticson-navbar {
width: 195px;
}
/*CONTENT STYLING*/
.content {
max-width: 1400px;
margin: 0 auto;
}
.btn-padding {
padding: 0.75rem 3rem;
border-radius: 1px;
}
.content > .upper-section-wrapper > .btn-primary:hover {
background: transparent;
}
.content > .upper-section-wrapper > .btn-outline-primary {
color: #fff;
}
.unghi-upper-section {
position: absolute;
bottom: 0;
left: 0;
border-left: 100vw solid transparent;
border-bottom: 100px solid #f5f5f5;
}
.upper-section-robot {
max-width: 50%;
float: right;
}
.text-upper-section {
padding-top: 8rem;
}
.upper-section-wrapper {
font-size: bold;
max-width: 100%;
border-radius: 0;
background-color: #001a33 !important;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css">
<title>index</title>
</head>
<body>
<div id="container-site">
<div id="upper-section">
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="Logo RoboticsOn" class="logo-roboticson-navbar"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-upper-section" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Acasă <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lecţii</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Exerciţii</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav navbar-left-custom ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Logare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Înregistrare</a>
</li>
</ul>
</div>
</nav>
<div class="content">
<div class="upper-section-wrapper">
<div class="row">
<div class="col-md-6 text-upper-section">
<h1 class="display-4">Bine aţi venit!</h1>
<p class="lead">Pagina clubului nostru este locul ideal pentru iniţierea dvs în robotică!</p>
<a class="btn btn-primary btn-lg btn-padding" href="#" role="button">Detalii</a>
<a class="btn btn-outline-primary btn-lg btn-padding" href="#" role="button">Logare</a>
</div>
<div class="col-md-6 image-upper-section">
<img src="img/robot.png" class="upper-section-robot" alt="Robot RoboticsOn">
</div>
</div>
</div>
<div class="unghi-upper-section"></div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html> Я не знаю, как добавить изображения во фрагмент, извините. Робот на скриншоте — это:
<img src="img/robot.png" class="upper-section-robot" alt="Robot RoboticsOn">
У вас есть какие-либо предложения о том, как мне это исправить? Или, может быть, это правильно, и мне просто нужно использовать некоторые медиа-запросы?
Спасибо.
Ответ №1:
Попробуйте добавить overflow:hidden; к своему #upper-section идентификатору. Любой контент, который вытекает из вашего контейнера div, будет обрезан.