Как мне получить изображение, чтобы растянуть DIV - PullRequest
Новая
       9

Как мне получить изображение, чтобы растянуть DIV

1 голос
/ 26 апреля 2009

Я пытаюсь получить изображение для растягивания элемента div в моей новой теме блога Tumblr.

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

Проблема!

Это то, что я после: альтернативный текст http://dl.getdropbox.com/u/973862/problem.jpg Вот рисунок!

Вот мой код: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Brant Winter">
    <!-- Date: 2009-04-26 -->
</head>

<style type="text/css">

.container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.photo {
    border: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}


</style>

<body>

<div class="container">
  <div class="photo">
    <img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
    <div class="caption">Sausage dog airtime</div>
  </div>
</div>

</body>
</html>

И вот как это выглядит в моем браузере: альтернативный текст http://dl.getdropbox.com/u/973862/Picture%202.png Вот как это выглядит

Контейнер div должен быть центрирован, изображение должно быть центрировано внутри него, и текст заголовка не должен проходить за края фотографии (если для этого было достаточно текста)

Не уверен, что я понимаю, но любая помощь будет признательна - я потратил часы на это сегодня !!!

Ответы [ 3 ]

0 голосов
/ 26 апреля 2009

Я думаю, что самым простым решением было бы просто установить ширину контейнера. Почему это 520px?

Если это должно быть 520px, то просто отцентрируйте содержимое в контейнере и добавьте авто-поля для заголовка: 

<style type="text/css">

.container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.photo {
    border: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}

.caption {
    max-width: 333px;
    margin-left: auto;
    margin-right: auto;
}

</style>

Свойство max-width, в частности, предотвратит пролив заголовка за края фотографии.

0 голосов
/ 28 апреля 2009

Если вы не против использовать jQuery для его изменения, вы можете попробовать что-то вроде этого: 

    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".container").css("width", $(".photo img").css("width"));
        });
    </script>

Это находит ширину изображения внутри div (обратите внимание на пространство между ".photo" и "img") с классом "photo" и применяет эту ширину к div с классом "container". На всякий случай, вы, возможно, захотите использовать идентификаторы, если это возможно, но это будет работать до тех пор, пока имена классов уникальны.

0 голосов
/ 26 апреля 2009

Вы имеете в виду как центрирование фото? 

.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <--- 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...