изменить размер div в зависимости от ориентации изображения

Question

изменить размер div в зависимости от ориентации изображения

0

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

Пример кода, который я использую для отображения изображений:

<div id="favphoto">            
    <a href="/event/%event%/photo/%id%.jpg" target="_blank">
        <img border="0" src="/event/%event%/photo/%id%.jpg" />
    </a>
</div>

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

Nick Hazrd 04 окт. 2013, в 19:38

Источник

0

Я не уверен, что понимаю, но у вас есть css для min-width, min-height или установите для width / height значение auto. Может быть, это может помочь.
the_lotus 04 окт. 2013, в 17:16
0

У вас есть пример кода того, что вы пытаетесь, если так, пожалуйста, опубликуйте его, это поможет найти лучшее решение, чем просто общий и открытый вопрос.
tremor 04 окт. 2013, в 17:17
2

DIV по умолчанию будет растягиваться по всему экрану. У вас должен быть какой-то CSS или родительский контейнер, который вызывает это.
Code Maverick 04 окт. 2013, в 18:33

Показать ещё 1 комментарий

Теги:

html

css

image

1 ответ

Ещё вопросы

Я не уверен, что понимаю, но у вас есть css для min-width, min-height или установите для width / height значение auto. Может быть, это может помочь.
У вас есть пример кода того, что вы пытаетесь, если так, пожалуйста, опубликуйте его, это поможет найти лучшее решение, чем просто общий и открытый вопрос.
DIV по умолчанию будет растягиваться по всему экрану. У вас должен быть какой-то CSS или родительский контейнер, который вызывает это.

Paulie_D · Accepted Answer · 2013-10-04T20-32-00.000Z

Установка div для display:inline-block приведет к тому, что он будет только шириной, чем содержимое.

Пример JSFiddle

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/400/200/sports/" />
    </a>
</div>

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/200/400/sports/" />
    </a>
</div>

.favphoto {
    display:inline-block;
    vertical-align:top;
}

.img {
    display:block;

}

Спасибо, это сработало, спасибо всем вам за помощь