Как сделать жидкое центрированное изображение с наложением подписи? - PullRequest
Новая
       26

Как сделать жидкое центрированное изображение с наложением подписи?

1 голос
/ 27 апреля 2011

Я пытаюсь с помощью CSS отобразить изображение, центрированное с наложением надписей, и жидкую возможность, когда окно браузера слишком маленькое (уменьшается в размерах).

Моя текущая лучшая попытка выглядит следующим образомHTML (используя логотип Google в качестве примера изображения) 

<div align="center">
   <div class="container">
      <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
      <h3 class="caption">Image Caption</h3>
   </div>
</div>

со следующим CSS 

.container {
   position : relative;
   max-width : 364px;
}
.picture {
    border-radius:0.5em;
    box-shadow: 0px 0px 0.5em #000000;
    max-width:364px;
}
.caption {
    position:absolute;
    padding:0.25em;
    top:1em; left:0; right:0;
    color:black;
    background-color:rgba(0,0,0,0.2);
    text-align:center;
}

Однако, если он ведет себя по центру, как я хочу, чтобы он был для больших окон браузера, он нене сжимается для небольших окон браузера ... Также мне не нужна поддержка IE, было бы достаточно специфичного для WebKit (iPhone / Android), и я хотел бы избежать JavaScript, если это возможно.

JSFiddle ready-играть с версией http://jsfiddle.net/kWH3C/1/

1 Ответ

5 голосов
/ 27 апреля 2011

Просто установите максимальную ширину для контейнера вместо изображения и укажите для изображения width:100%

http://jsfiddle.net/Madmartigan/kWH3C/5/

<div class="container">
    <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
    <h3 class="caption">Image Caption</h3>
</div>

.container {
    position : relative;
    max-width : 364px;
    margin:0 auto;
}
.picture {
    border-radius:0.5em;
    box-shadow: 0px 0px 0.5em #000000;
    width:100%;
}
.caption {
    position:absolute;
    padding:0.25em;
    top:1em; left:0; right:0;
    color:black;
    background-color:rgba(0,0,0,0.2);
    text-align:center;
}

Вы не делаетенужен внешний div, и align="center" устарел в HTML5, используйте CSS для выравнивания и позиционирования.

...