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

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

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

The Problem !

Это то, что я после: alt text http://dl.getdropbox.com/u/973862/problem.jpg Here is a drawing !

Вот мой код:

<!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>

И это то, что он выглядит в браузере: alt text http://dl.getdropbox.com/u/973862/Picture%202.png This is what it looks like

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

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

источник

2009-04-26 Anonymous

Если вы попытались разместить изображения, для которых должна выглядеть страница, мы их не увидим. – hbw

Я бы перефразировал заголовок/вопрос. Это больше похоже на то, что вы хотите, чтобы текстовый div уменьшался до ширины вашей фотографии. – Calvin

Вы наконец достиг того, чего хотите? Вы можете выбрать ответ, который сработал (или рассказать нам, что вы сделали в конце). Thx – Edelcom

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

.photo { 
border:1px solid #CCCCCC; 
margin-left:auto; 
margin-right:auto; 
text-align:center; <--- 
}

источник

2009-04-26 03:25:17

Nah - это больше о центрировании в div), потому что именно с этим я должен работать в Tumblr, а затем убедитесь, что мой заголовок div не простирается за границу фотографии. см. http://dl.getdropbox.com/u/973862/test/index.html – 2009-04-26 03:28:36

Я думаю, что самым простым решением было бы только исправить ширину контейнера. Почему это 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 собственности, в частности, позволит предотвратить заголовок рассыпания мимо краев фотографии.

источник

2009-04-26 03:29:21 hbw

Его 520px, потому что это то, что нужно, чтобы вписаться в мою тему Tumblr. Я в основном использую изображения шириной 500 пикселей, но время от времени мне нужно разместить изображение с меньшей шириной, например, как собака-колбаса, я действительно не использовал фиксированную ширину, потому что я не могу разместить все изображения.Я хотел бы иметь текст, содержащийся под изображением, и не идти мимо краев изображения. – 2009-04-26 03:31:26

Собственно - это исправляет !!!!! Damm - Я потратил часы, пытаясь заставить это работать. Я посмотрю, что произойдет, когда я поместил код в фактический код темы, но пока - он работает! http://dl.getdropbox.com/u/973862/test/index2.html – 2009-04-26 03:33:14

Ох - на самом деле, я понимаю, почему он работает. Атрибут max-width. Понимаете, это остановит, скажем, изображение в 500 пикселей, если текст будет растянут до краев большего изображения. – 2009-04-26 03:34:23

Если вы не возражаете, используя 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») с классом «фото» и применяет эту ширину к div с классом «контейнер». Чтобы быть в безопасности, вы, вероятно, захотите использовать идентификаторы, если это возможно, но это будет работать до тех пор, пока имена классов уникальны.

источник

2009-04-28 04:37:04

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

ответ

Смежные вопросы