Javascript 如何在17''；当转盘中的图像为1365 x 415 px时，屏幕或更多屏幕？_Javascript_Jquery_Html_Css

Javascript 如何在17''；当转盘中的图像为1365 x 415 px时，屏幕或更多屏幕？

javascript jquery html css

Javascript 如何在17''；当转盘中的图像为1365 x 415 px时，屏幕或更多屏幕？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经建立了一个网站使用引导CSS和Javascript。我的主要问题是在每个屏幕上以一个好的比率将我的图像放入旋转木马。所以我想到了将我的图像大小调整到1365 x 415像素的想法。这个问题似乎在15英寸及以下的所有屏幕上都得到了解决。但我最近尝试在17英寸或以上的屏幕上查看我的网站，carousel中的图像根本不适合屏幕。因此，我想知道如何解决这个问题。有人能帮忙吗以下是我的代码html代码： <!DOCTYPE html> <html lang="en">

我已经建立了一个网站使用引导CSS和Javascript。我的主要问题是在每个屏幕上以一个好的比率将我的图像放入旋转木马。所以我想到了将我的图像大小调整到1365 x 415像素的想法。这个问题似乎在15英寸及以下的所有屏幕上都得到了解决。但我最近尝试在17英寸或以上的屏幕上查看我的网站，carousel中的图像根本不适合屏幕。因此，我想知道如何解决这个问题。有人能帮忙吗

以下是我的代码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>

您可以通过以下链接查看该网站：ask-technology.com

如果你需要更多的信息来帮助让我知道。谢谢大家

在CSS末尾添加以下内容：

.item img {
  width: 100%;
}

在CSS末尾添加以下内容：

.item img {
  width: 100%;
}

这部分

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

更改<代码>最大宽度：100%至<代码>宽度：100%

但是图像将根据宽度比增加，这将使滑块更高

这部分

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

更改<代码>最大宽度：100%至<代码>宽度：100%

但是图像将根据宽度比增加，这将使滑块更高

那是你一打开网站就在上面的旋转木马吗？那是你一打开网站就在上面的旋转木马吗？