我是新来的，也是编码方面的新手，我已经使用 Visual Studio Code 练习了一个星期，但我遇到了以下问题:我正在制作一个包含内容的 slider ，因此我可以对其进行编辑和放置它里面有一个带有模态的按钮，我设法让它工作但是当我把它制作成信息卡上的图像时出于某种原因超出了信息卡的限制，我不知道我做错了什么.这是我的代码，如果这不是上传代码的正确方式，我深表歉意，我仍然不知道如何正确使用该网站。
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------Zona de Extensiones+6------------------------------------------>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/css/style3.css">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/materialize/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
.slider .indicators .indicator-item {
background-color: #666666 !important;
border: 3px solid #ffffff !important;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.slider .indicators .indicator-item.active {
background-color: #ffffff !important;
}
.slider {
width: 900px !important;
margin: 0 auto !important;
}
.slider .indicators {
bottom: 60px !important;
z-index: 100 !important;
/* text-align: left; */
}
nav {
background-color: black !important;
border-style: outset white 100px !important;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
.nav-wrapper .brand-logo .logo {
width: 64px !important;
}
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit !important;
}
.column {
float: left !important;
width: 33.3% !important;
margin-bottom: 16px !important;
padding: 0 8px !important;
}
@media screen and (max-width: 650px) {
.column {
width: 100% !important;
display: block !important;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
}
.container {
padding: 0 16px !important;
}
.card {
border-style: outset !important;
border-color: black 10px !important;
}
.container::after, .row::after {
content: "" !important;
clear: both !important;
display: table !important;
}
.title {
color: goldenrod !important;
}
.button {
border: none !important;
outline: 0 !important;
display: inline-block !important;
padding: 8px !important;
color: white !important;
background-color: #000 !important;
text-align: center !important;
cursor: pointer !important;
width: 100% !important;
}
.button:hover {
background-color: #555 !important;
}
footer div {
max-width: 100% !important;
}
</style>
</head>
<body>
<!----------------------------------------Scrips----------------------------------------->
<!----------------------------------------Scrips----------------------------------------->
<header>
<div class="panel">
<span style="display: inline-block; vertical-align: middle; height:100vh;"></span>
<span style="display: inline-block; vertical-align: middle; ">
<p class="title">L'excellance</p>
<p class="sub-title" style-color="goldenrod"> V.I.P Suites <a></p>
</div>
</header>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right"><img class="logo" src="https://i.dlpng.com/static/png/36814_preview.png"alt="L'excellance"></a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="sass.html">Home</a></li>
<li><a href="badges.html"></a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
<br><br>
<section>
<p>
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue eratatmassa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum anteipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, eliterat euismodorci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus,bibendum sed, posuereac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere.Praesent turpis.
</p>
</section>
<br>
<br>
<div class="container"><div class="divider"></div></div>
<br>
<br>
<br>
<br>
<div class="w3-row-padding w3-border-light-grey w3-round w3-padding"></div>
<div class="row">
<div class="column">
<div class="card">
<img class="materialboxed" data-caption="CEO & Founder Sugma Joe " src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" width="auto" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="John" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example@example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="divider"></div>
<br>
<br>
<!----------------------------------------Sección 3------------------------------------------>
<div class="slider">
<ul class="slides">
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<!----------------------------------------Fin de Sección 3------------------------------------------>
<!----------------------------------------footer------------------------------------------>
<!----------------------------------------Zona de Scrips------------------------------------------>
<script>
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
<script>
// init materialize tab
var elem = $('.tabs')
var options = {}
var instance = M.Tabs.init(elem, options);
//or Without Jquery
//var elem = document.querySelector('.tabs');
var options = {}
var instance = M.Tabs.init(elem, options);
</script>
</body>
</html>
最佳答案
要在此处发布您的代码，只需键入您的短信，然后在消息下方粘贴您的代码， 选择您的代码段，然后按 ctrl+K，这应该将您的消息设置为使用代码发布... 发布您的代码以便其他人能够帮助您...
关于javascript - Materialise slider 破坏了我的图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59762172/