Problem with image height

Question

Problem with image height

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

1

Left Banner stays that way.

Itriedtoplayagame,butitdidnotworkverywell.->.slide-1img{min-height:480px;}

MyHTMLandCSScode:

.slide{width:100%; height:480px; margin-top:40px;}
.slide img{display:block;}
.slide-1{width:60%; float:left;}
.slide-2, .slide-3{width:40%; float:right;}

<div class="slide">
  <div class="slide-1">
    <img src="img/img-slide-1.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
  <div class="slide-2">
    <img src="img/img-slide-2.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
  <div class="slide-3">
    <img src="img/img-slide-3.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
</div>

css css3

asked by anonymous 04.01.2017 / 00:01

3 answers

3

If it is to be 100% height, it is not width:100% , it is height:100% , and the other sense, "auto".

If you want to be larger than the frame (adjusting by width or height, depending on which is smaller) you need to use:

background-size:cover

instead of width and height .

div {
  background:url(https://i.stack.imgur.com/BP1X8.png) center;
  background-size:cover;
  /* daqui pra baixo é só para o teste */
  margin:10px;
  float:left;
}

.h {
  width:200px;
  height:150px;
}

.v {
  width:150px;
  height:200px;
}

<div class="v"></div>
<div class="h"></div>

04.01.2017 / 00:39

0

Try this fast, though not very effective solution

.slide img {width:100%; height:100%;}

04.01.2017 / 00:43

Incorrect value conversion in python Accessing a shared directory through PHP, is it possible?

score 1 · Accepted Answer

So I understand, you put the images inside div 's to organize, so you would have to first position the div ' s and then the images, see if this helps you:

.slide{
  width:100%; 
  height:480px; 
  margin-top:40px;
  background-color: red;
  font-size: 0;
}

.slide img{
  display:inline-block;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.slide-1{
  height:100%;
}

.slide-2, .slide-3{
  height:50%;
}

.coluna-1, .coluna-2{
  display: inline-block;
}

.coluna-1{
  height: 100%;
  width: 60%;
}

.coluna-2{
  width: 40%;
  height: 100%;
}

<div class="slide">
  <div class="coluna-1">
    <img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"alt="" class="slide-1">
  </div>
  <div class="coluna-2">
    <img src="http://kingofwallpapers.com/imagem/imagem-005.jpg"alt="" class="slide-2">
        <img src="http://kingofwallpapers.com/imagem/imagem-005.jpg"alt="" class="slide-3">
  </div>     
</div>

Note that the images are with the obeject-fit:cover property, which would be the same as the background-size: cover