个人中心
gpt4 book ai didi

javascript - 当轮播中的图像为 1365 x 415 px 时，如何使轮播图像适合 1 7'' 或更多屏幕？

转载 作者：行者123 更新时间：2023-11-28 05:05:00 25 4
gpt4 key购买 nike

我使用 bootstrap CSS 和 Javascript 构建了一个网站。我的主要问题是让我的图像以良好的比例适合每个屏幕上的轮播。所以我想出了将图像大小调整为 1365 x 415 像素的想法。这个问题似乎在 15 英寸及以下显示器的所有屏幕上都得到了解决。但最近，我尝试在 17 英寸或更大的屏幕显示器上查看我的网站，轮播中的图像根本不适合屏幕。所以我想知道该怎么做才能解决这个问题。有人可以帮忙吗？

这是我的代码 html 代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home Page</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
    .navar-default {
}
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body class = "wrapper">
    <div class="container-fluid">
      <nav class="navbar navar-default">
        <div class="container-fluid">
        <ul class = "topnav" id="myTopnav">
        <li><a class="active" href= "index.html">ASK-Technology</a></li>
        <li><a href= "responsive.htm">Responsive Design</a></li>
        <li><a href= "seller.htm">Sell</a></li>
        <li><a href= "about.htm">About</a></li>
        <li class="float"><a href= "#about">&#9743; +8455481395 </a></li>
        <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
        </ul>


    </div>
  <div id="carousel1" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active"><img src="images/header1.jpg" alt="First slide image" class="center-block">
          <div class="carousel-caption">
            <h3>Electronic Repairs.</h3>
            <p>Quickly, Fix your devices at low-cost.</p>
          </div>
        </div>
        <div class="item"><img src="images/header2.jpg" alt="Second slide image" class="center-block">
          <div class="carousel-caption">
            <h3>Sell your Smartphones, and Electronics for Cash.</h3>
            <p>A simpler process and better service.</p>
          </div>
        </div>
        <div class="item"><img src="images/header3.png" alt="Third slide image" class="center-block">
          <div class="carousel-caption">
            <h3>Building a responsive web site has never been easier.</h3>
            <p>Let's do great things together!</p>
          </div>
        </div>      
      </div>
      <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
      <hr class = "lineBreak">
<footer class ="footerDesign">
    <p align = "center">&copy; Copyrights 2016 All Rights Reserved. Web Site Designed with &hearts; by Ahmed Salim Kedote.</p>


    </footer>
    <aside class="socialMedia"></aside>
    <script src="myscripts.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

这是我的轮播图像的引导 CSS 代码:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
       -o-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}

您实际上可以通过此链接查看该网站:ask-technology.com如果您需要更多信息以便帮助，请告诉我。谢谢大家!

最佳答案

将其添加到 CSS 末尾:

.item img {
  width: 100%;
}

关于javascript - 当轮播中的图像为 1365 x 415 px 时，如何使轮播图像适合 1 7'' 或更多屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41825011/

25 4 0
文章推荐： html - 您推荐哪种 HTML5 移动框架？
文章推荐： c++ - Poco 迭代嵌套的 JSON 对象
文章推荐： jquery - 自举视差速度
文章推荐： javascript - Highchart系列正在砍伐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com