Держите пропорции изображения и внутри div - PullRequest
Новая
       7

Держите пропорции изображения и внутри div

0 голосов
/ 26 сентября 2018

Я хочу иметь изображение внутри div (фиолетовое, см. Изображения ниже), размеры которого выражены в%, и что изображение никогда не выходит из div, но изменяет размер при необходимости, сохраняя соотношение сторон.

В настоящее время мой код следующий, но изображение получается из div, как вы можете видеть на рисунках ниже. 

html {
  min-height: 100vh;
  position: relative;
}

body {
  height: 100vh;
  overflow: hidden;
}

#grille {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  flex-direction: row;
  display: flex;
  background-color: red;
}

#colonne {
  width: calc(100% / 3);
  height: 100%;
  background-color: green;
}

#cellule {
  flex-direction: column;
  width: 100%;
  height: calc(100% / 3);
  background-color: aqua;
}

#conteneurImage {
  width: 100%;
  height: 80%;
  background-color: violet;
}

#conteneurImage img {
  width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="table.css" />
</head>

<body>
  <div id="grille">
    <div id="colonne">
      <div id="cellule">
        <div id="conteneurImage">
          <img src="home.png">
        </div>
        <div id="conteneurTexte">
          Accueil
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  </script>
</body>

Результат:

the result

Что я ожидаю:

what I expect

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

Просто добавьте 

  #conteneurImage img {            
                display: block;
                width: 100%;              
            }
0 голосов
/ 26 сентября 2018

Вы можете использовать «display: flex; justify-content: center;» в #conteneurImage.А затем используйте «ширина: авто; высота: 100%;»в #conteneurImage img. Подробнее о flex можно узнать в https://css -tricks.com / snippets / css / a-guide-to-flexbox / 

html {
  min-height: 100vh;
  position: relative;
}

body {
  height: 100vh;
  overflow: hidden;
}

#grille {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  flex-direction: row;
  display: flex;
  background-color: red;
}

#colonne {
  width: calc(100% / 3);
  height: 100%;
  background-color: green;
}

#cellule {
  flex-direction: column;
  width: 100%;
  height: calc(100% / 3);
  background-color: aqua;
}

#conteneurImage {
  width: 100%;
  height: 80%;
  background-color: violet;
  display:flex;
  justify-content: center;
}

#conteneurImage img {
  width: auto;
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="table.css" />
</head>

<body>
  <div id="grille">
    <div id="colonne">
      <div id="cellule">
        <div id="conteneurImage">
          <img src="https://image.flaticon.com/icons/svg/2/2144.svg">
        </div>
        <div id="conteneurTexte">
          Accueil
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  </script>
</body>
0 голосов
/ 26 сентября 2018 

html{
    min-height:100vh;
    position:relative;
}
body{
    height:100vh;
    overflow:hidden;
}
#grille {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    flex-direction: row;
    display: flex;
    background-color: red; 
}
#colonne {
    width: calc(100% / 3);
    height: 100%;
    background-color: green; 
}
#cellule
{
    flex-direction: column;
    width:100%;
    height:calc(100% / 3);
    background-color: aqua; 
}
#conteneurImage
{
    width:100%;
    height:80%;
    background-color: violet; 
}
#conteneurImage img{
    width:100%;
    height: auto;
}

html{
    min-height:100vh;
    position:relative;
}
body{
    height:100vh;
    overflow:hidden;
}
#grille {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    flex-direction: row;
    display: flex;
    background-color: red; 
}
#colonne {
    width: calc(100% / 3);
    height: 100%;
    background-color: green; 
}
#cellule
{
    flex-direction: column;
    width:100%;
    height:calc(100% / 3);
    background-color: aqua; 
}
#conteneurImage
{
    width:100%;
    height:80%;
    background-color: violet; 
}
#conteneurImage img{
    width:100%;
    height: 100%;
}
<html>
    <head>
        
    </head>
<body>
<div id="grille">
    <div id="colonne">
        <div id="cellule">
            <div id="conteneurImage">
                <img src="https://mbtskoudsalg.com/images/chain-fence-png-7.png">
            </div>
            <div id="conteneurTexte">
                Accueil
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
</script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...