0
Я хочу, чтобы мое изображение в карусели стало отзывчивым, особенно высота изображения. Ширина в порядке, но высота делает изображение только наполовину. Кто-нибудь может мне помочь? Дайте мне некоторые идеи, пожалуйста. Я просто хочу только 500px высоты, и я достиг этого, но я хочу, чтобы высота моего изображения стала 100%.Сделайте отзывчивое изображение в карусели
Вот картинка 
Вот полное изображение 
Вот HTML-код.
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-7">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 col-xs-5 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="40">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="GAPC" class="img-responsive">
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
<li><a href="#">Mission and Vision</a></li>
</ul>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Faculty Portal</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/tae.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/tubol.jpg" alt="Chania ">
</div>
<div class="item">
<img src="img/tulok.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/ebak.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
это мой код css.
.navbar-header{
height: 74px;
}
.navbar-toggle{
position: relative;
top: 15px;
}
.navbar-default .navbar-nav > li > a {
font-weight: 560;
color: #949494;
display: block;
padding: 5px 35px 2px 45px;
border-bottom: 3px solid transparent;
line-height: 70px;
text-decoration: none;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #a92419;
background-color: transparent;
}
.navbar-default{
background-color:#fff;
margin: 0;
}
.nav>li>a {
position: relative;
}
.navbar-default .navbar-right > li > a {
padding: 0 20px;
margin-right:6px;
}
.nav.navbar-nav > li{
display: :inline-block;
}
.nav.navbar-nav{
list-style-type:none;
}
.nav.navbar-nav > li > a:hover{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#a92419;
margin:0 0 4px;
width: 25px;
height: 5px;
margin-right: 13px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background: none;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
margin: 0px;
}
.navbar.affix {
width: 100%;
qposition: fixed;
top:0;
background-color: rgba(255,255,255,0.7);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu>li>a:hover {
color:#a92419;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 3em;
color: #333;
white-space: nowrap;
}
.dropdown:hover a.dropdown-toggle {
border-bottom-color: #a92419;
color:#a92419;
}
.top-bar-dark {
background-color: #a92419;
}
.top-bar-light {
background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
border-color: #ddd;
}
.top-bar-light .top-dark-right li a:hover {
color: #32c5d2;
}
.top-bar-socials {
line-height: 30px;
padding-top: 5px;
}
.top-bar-socials:after {
display: table;
clear: both;
content: "";
}
.top-bar-socials a {
margin: 0px 8px;
text-decoration: none;
font-size:18px;
color: #fff;
}
.top-dark-right {
margin: 0px;
padding: 0px;
}
.top-dark-right li {
line-height: 40px;
border-left: 1px solid #932015;
padding: 0px 10px;
}
.top-dark-right li, .top-dark-right li a {
color: #d7d7d7;
font-size: 12px;
}
.top-dark-right li i {
margin-right: 5px;
}
.top-dark-right li a:hover {
color: #fff;
}
a.login{
text-decoration: none;
}
.fa-facebook:hover{
color:#3b5998;
}
.fa-twitter:hover{
color:#1dcaff;
}
.fa-linkedin:hover{
color:#007bb5;
}
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel-inner{
height: 500px;
}
.carousel-inner img{
height: auto;
width: 100%;
}
@media (max-width: 240px){
.img-responsive{
padding-top: 5px;
width: 190px;
height: 60px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
@media(min-width: 241px) and (max-width: 320px){
.img-responsive{
width: 240px;
height: 60px;
margin-left: 5px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
@media(min-width: 321px) and (max-width: 480px){
.img-responsive{
width: 250px;
height: 65px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
@media(min-width: 481px) and (max-width: 767px){
.img-responsive{
width: 280px;
height: 70px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
@media(min-width: 768px) and (max-width: 1024px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
}
вы можете отправить ссылку для тестирования? – Mimouni
i dont have js fiddle sir .. – nethken
попробуйте новый код в вашем стиле.css – Mimouni