Question

因此，我正在尝试为学校项目构建网站，并且图像存在一些奇怪的行为。我不知道如何解释真实情况，我将添加一些屏幕截图。

在第一张图片中，浏览器为全屏（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">

对于如何解决此问题，您有任何建议吗？或者也许是正确的，我只需要使用一些媒体查询？谢谢。

Answer 1

尝试将overflow:hidden;添加到您的#upper-section ID中。从div容器流出的所有内容都将被裁剪。

如何修复图像溢出其容器的问题？

1 个答案: