如何修复溢出其容器的图像？
[英]How can I fix an image overflowing its container?
问题描述
所以我正在尝试为学校项目建立一个网站，并且有一些奇怪的图像行为。 我不知道如何解释正在发生的事情，我会添加一些截图。
在第一张照片中，浏览器是全屏（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 个解决方案
解决方案1
0 已采纳 2019-03-24 11:08:01
尝试添加overflow:hidden; 到你的#upper-section ID。 流出div容器的任何内容都将被剪裁。
我如何才能停止 <ul> 元素溢出其容器的边界？
[英]How can I stop a <ul> element from overflowing the bounds of its container?
我为<a>按钮设置了样式，现在它溢出了它的父容器</a>
[英]I styled a <a> to a button, now its overflowing its parent container
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.