Разрешить изображения в <div> быть шире строк текста в том же <div>

Я хочу подогнать текст в <div> под ширину <div>, но подгонять изображения в том же <div> под ширину родительского <div>

Эта диаграмма должна прояснить ситуацию:

(здесь URL, если он слишком маленький: http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)

Ответы

Ответ 1

Я бы решил это одним из двух способов. Вот идея № 1:

CSS

#inner {width:400px; position:relative; float:left;}

HTML:

<div id="inner">
    <img src="awesomeimage.jpg" alt="this awesome image" />
    <p>text goes here</p>
    <img src="awesomeimage.jpg" alt="this awesome image" />
</div>

SCRIPT:

<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
    width : imgWidth + 'px'
});
</script>

Предполагается, что вы загрузили jQuery и используете Javascript на своем сайте. Если вы хотите отрегулировать ширину изображения, для заполнения, полей и границ, сделайте это в переменной.

У вас может быть масштаб изображения с окном, как в примере, используемом в этом скрипте JS, который я создал для другого вопроса: http://jsfiddle.net/D544n/1/

Идея №2: с помощью Javascript.

CSS

#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */

HTML:

<div id="outer">
    <div id="inner">
        <img src="awesomeimage.jpg" alt="this awesome image" />
        <p>text goes here</p>
        <img src="awesomeimage.jpg" alt="this awesome image" />
    </div>
</div>

Селектор для этого был схвачен из другого S.O. Вопрос.

Я не думаю, что вы найдете простой и понятный способ сделать это. Это мои две лучшие идеи, и это можно решить другими способами. Если вы идете по этому пути, чтобы организовать свой контент, вы можете подумать о своей стратегии при достижении своей цели.

Ответ 2

Что делать, если вы полностью избавились от внутреннего div, но поместили ширину 400 пикселей на все теги p в внешнем div? Затем все будет правильно работать, и изображения будут дочерними элементами внешнего div, поэтому они могут быть ограничены шириной.

Конечно, это может вызвать некоторые проблемы, если есть много других элементов, которые должны содержаться в области 400px, но если это только абзацы и некоторые заголовки, то вы настроены.

Ответ 3

изменить

Я уточнил свой подход. Меня вдохновил Адам Данн answer.
Все, что вам нужно сделать, это обернуть каждый img с помощью <div class="sanitize">|</div>. Либо сделайте это на стороне сервера (рекомендуется), либо с помощью небольшого jQuery wrap (слева для читателя в качестве домашней работы). Также не допускайте div только p s.

Секреты:

  • У вас есть граница/фон в отдельном div.border, если вам нужно
  • Перезапишите max-width в inherit !important

http://jsfiddle.net/HerrSerker/PSPyZ/9/

HTML

<div class="container">
    <div class="border"></div>
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut        <div class="sanitize">
            <img src="http://lorempixel.com/800/200/sports/2" /></div>
        </p>
        <div class="sanitize"><img src="http://lorempixel.com/800/200/sports/2" /></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
    </div>
    <br clear="left" />
</div>​

CSS

.container {
    position: relative;
    width: auto;
    border: 1px solid red;
}
.container > .inner {
    border: 1px solid gold;
    width: 100%;
    min-width: 400px;
}
.container > .inner > * {
    max-width: 400px;
}
.container > .inner .sanitize {
    position: relative;
    max-width: inherit !important;
    border: 1px solid green;
    width: 100%;
}

.container > .inner .sanitize > img {      
    display: block;
    width: 100%;  
}
.container > .border {
    width: 400px;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    height: 100%;
    border: 1px solid silver;
}​

Первый ответ

Почему бы и нет?
См. Здесь для примера: http://jsfiddle.net/HerrSerker/PSPyZ/

Ответ 4

С небольшим количеством js вы можете сделать это, избегая всех осложнений.

$(document).ready(function() {
    //read every images
    $("img").each(function(k,v) {
        //get the width parent parent
        var width = $(this).parent().parent().innerWidth();
        //use it
        $(this).css('width',width);
    });
});

Демо

Ответ 5

Вы можете использовать свойство переполнения CSS, чтобы содержимое могло переполнять границы контейнера. Попробуйте overflow: visible на вашем внутреннем div.

Ответ 6

Расширение ответа Лазаря:

Установите overflow:visible; в свой внутренний div. Затем используйте Javascript, чтобы установить максимальную ширину изображений в размере вашего внешнего div, то есть в окне просмотра браузера. Что-то вроде этого, может быть?

document.body.innerdiv.img.style.maxWidth = window.innerWidth + 'px';

Ответ 7

#outer {position:absolute;top:0;left:1%;width:99%;}
#outer img{width:100%;position:absolute;left:0;}

Лучшее, что я могу описать, это строки выше, но они не будут обертывать текст вокруг причины, когда элементы с абсолютным расположением удаляются из потока.

Я думаю, что ellawren предложил лучшее решение до сих пор: "полностью избавился от внутреннего div.

Вы говорите: "содержимое DIV устанавливается пользователями (и они могут не использовать абзацы)" .

Однако вы можете запустить простой шаблон REGEX перед тем, как нарисовать "содержимое".. Шаблон разрывает текст в div/параграфах, где он не задан/до или после тега изображения /. Затем вы можете создавать изображения отдельно.

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

Ответ 8

HTML

<div class="outer">
  <div class="inner"><p>Your content goes here</p>
  <img src="http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png" alt="" /> 
  <p>Your content goes here</p></div>
</div>

CSS

.inner { float: left; width: 400px; overflow: visible; }
.inner img { width: 2000px; }

JQuery

var browserWidth = $(document).width();
$('div.inner img').css('width', browserWidth);

Ответ 9

Может делать это с чистым css.

CSS

.container{
   max-width:400px;
   border:1px solid red;
}
.container > img {
    width: 100%;
    position:absolute;
    height:200px;
}
img + p{
    margin-top:200px;
}

Отметьте http://jsfiddle.net/PSPyZ/5/

Ответ 10

Решение: Положите внутренний DIV налево, чтобы сделать его не таким широким, как внешний DIV, а затем установите максимальную ширину для внутреннего DIV и его детей.

HTML:

<div id="outer">
    <div id="inner">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <img src="image.png" alt="image">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#outer {
    width: 100%;
    height: 100%;
}

#inner {
    max-width: 100%;
    float: left;
}

#inner > * {
    max-width: 400px;
}

#inner > img {
    max-width: inherit !important;
}

DEMO: http://pastehtml.com/view/br8c4ht5n.html
(Окно Resize показывает требования OP, серый - внешний DIV, оранжевый - внутренний DIV, синий - IMG.)

Ответ 11

Я уверен, что вы пробовали это, но это не работает

Edit:

    <script type="text/javascript">
function viewport()
{
var width;
var height;
var e = window,
 a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
 width = e[ a+'Width' ];

$('div#inner > img').attr('width', width);
}
</script>

Вы можете прочитать код ширины браузера: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

Я только что отредактировал бит и добавил бит jQuery

    #outer
{
    width:100%;
    float:left; 
}
#inner
{
    width:400px;
    float:left; 
}

<body onload="viewport();">
<div id="outer">
  <div id="inner">
  Text
  <img scr="" />
  Text
  </div>
</div>
</body>

Пример: http://projects.kausweb.com/stack

Я не уверен, что вы хотели, чтобы javascript думал

Ответ 12

В прошлом я использовал метод max-width, но должен был также включать минимальную ширину, чтобы мои изображения не становились слишком тощими.

Кроме того, если вы рассматриваете этот внутренний div как серию блоков контента, ваш документ, скорее всего, будет проходить немного интуитивно, и вам не потребуется много позиционирования и т.д.

#outer > div { width:400px; border:1px dotted gray; }
#outer > img { max-width:100%; min-width:400px }

<div id="outer">
    <div>Inner div block 1 content and whatnot. Inner div block 1 content and whatnot.<div>Nested block within div block 1 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
    <div>Inner div block 2 content and whatnot. Inner div block 2 content and whatnot.<div>Nested block within div block 2 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
</div>

Здесь jsfiddle: http://jsfiddle.net/B4gKS/ Сдвиньте центральный разделитель, чтобы увидеть эффект.

Ответ 13

Я не думаю, что вы сможете достичь этого, используя чистый CSS. Вот пример использования небольшого Javascript.

HTML

<div class="outer">
    <div class="inner">
        some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
        <img src="http://tinyurl.com/7pl9cw8" />
        <p>more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</p>
    </div>
</div>​

CSS

.outer {
    margin: 40px;
    border: 2px solid black;
    padding: 10px;
    min-width: 404px;
}
.inner {
    border: 2px solid black;
    width: 400px;
}​

JS

function changeWidth() {
    var ele = document.getElementsByTagName("img");
    var width = (document.getElementsByTagName("div")[0].offsetWidth - 28) + "px";
    for(var i = 0; i < ele.length; i++) {
        ele[i].style.width = width;
    }
}
window.onload = window.onresize = changeWidth;
​

DEMO

http://jsfiddle.net/XdAPU/