Как уменьшить DIV вокруг масштабируемого IMG? - PullRequest
Новая
       5

Как уменьшить DIV вокруг масштабируемого IMG?

2 голосов
/ 08 июля 2010

Простой (можно подумать!) Вопрос для всех CSS-гуру: я хотел бы сжать DIV аккуратно вокруг IMG.IMG 600 х 800, и мне нужно было намного меньше.Итак, я иду {высота: 100%;width: auto;} и ограничить высоту с помощью оболочки DIV.Однако, чтобы поддерживать (неизвестный мне) AR, я не могу зафиксировать ширину DIV.Я попытался установить DIV для переноса на «display: inline-block» или «float: left» или «position: absolute» или ... - не имеет значения: большинство браузеров растягивают этот DIV на 800px в ширину - исходная ширина полногоразмер IMG - выглядит так:

[[IMG] .............................]

Как ни странно, я могу добавить некоторый текст в DIV (только для проверки), и этот текст будет отображаться прямо рядом с масштабированным IMG:

[[IMG] Hello world ..................]

Кто-нибудь здесь знает, почему имеет значение исходный размер IMG (для определения ширины он не влияет на высоту)?И что я мог бы сделать, чтобы уменьшить DIV?

Спасибо за поиск.

РЕДАКТИРОВАТЬ: Чтобы проверить идею Пэра Висландера, я написал небольшой тестовый стенд, который должен помочь прояснить, что яо: 

<style type="text/css">  
  html, body {  
     height: 100%;  
  }  
  #dialog {  
     background: green;  
     height: 50%;  
     position: relative;  
  }  
  #frame {  
     border: 2px solid black;  
     display: inline-block;  
     height: 100%;  
     position: absolute;  
  }  
  #img {  
     height: 100%;  
     width: auto;  
  }  
</style>  

<body>  
  <div id="dialog">  
     <div id="frame">  
        <img id='img' src='...' />  
     </div>  
  </div>  
</body>

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

Ответы [ 3 ]

3 голосов
/ 08 июля 2010

Если указать ширину или высоту изображения в виде процент , этот процент будет рассчитан пропорционально размеру родительского блока. Таким образом, указание width: 50% на изображении не означает 50% ширины исходного изображения - это означает 50% ширины родительского блока . То же самое касается высоты. Таким образом, вокруг изображения всегда будет дополнительное пространство, если вы укажете ширину или высоту в процентах.

Решение простое - укажите размеры в пикселях, ems или любых других единицах, кроме процентов:

HTML 

<div class="wrapper">
  <img class="small" src="myimage.jpg">
</div>

CSS 

img.small {
  width: 150px;    /* or whatever you like */
  display: block;  /* to avoid empty space below the image */
}

div.wrapper {
  display: inline-block;
  border: 1px solid #000;
}

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

HTML 

<div class="wrapper big">
  <img src="myimage.jpg">
</div>

<div class="wrapper small">
  <img src="myimage.jpg">
</div>

CSS 

img {
  display: block;
  width: 100%;
}

.wrapper {
  margin-top: 1em;
  border: 1px solid #000;
}

.big {
  width: 600px;
}

.small {
  width: 300px;
}
0 голосов
/ 08 июля 2010

Я думаю, что подход Пэра правильный: не делай ширина: авто; } но вместо этого сделайте {height: auto; ширина: исправить; } Работает лучше.

0 голосов
/ 08 июля 2010

Так что я говорю высота = "50%", скажем, и ширина = "авто" (для поддержания AR).

Почему бы просто не пойти width="50%", как эторазрешите это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...