Изменить размер изображения через родительский DIV - PullRequest
Новая
       33

Изменить размер изображения через родительский DIV

16 голосов
/ 04 марта 2012

Я пытался сделать это, но размер файла не изменился: 

<div style="height:42px;width:42px">
   <img src="http://someimage.jpg">
</div>

Что изменит его размер (я не могу редактировать / касаться самого элемента img).

Заранее спасибо.

Ответы [ 4 ]

28 голосов
/ 04 марта 2012

Я не уверен, что вы подразумеваете под "У меня нет доступа к изображению", но если у вас есть доступ к родительскому div, вы можете сделать следующее:

Ели дают ваш div или класс: 

<div class="parent">
   <img src="http://someimage.jpg">
</div>

Чем добавить это к вашему css: 

.parent {
   width: 42px; /* I took the width from your post and placed it in css */
   height: 42px;
}

/* This will style any <img> element in .parent div */
.parent img {
   height: 100%;
   width: 100%;
}
7 голосов
/ 04 марта 2012

Примените 100% ширину и высоту к вашему изображению: 

<div style="height:42px;width:42px">
  <img src="http://someimage.jpg" style="width:100%; height:100%">
</div>

Таким образом, у него будет тот же размер, что и у его родителя.

0 голосов
/ 06 апреля 2014

На самом деле использование 100% не увеличит изображение, если оно меньше указанного вами размера div. Вам нужно установить одно из размеров, высоту или ширину, чтобы все изображения заполняли пространство. По моему опыту, лучше установить высоту, чтобы каждая строка была одинакового размера, тогда все элементы будут правильно перенесены на следующую строку. Это приведет к выводу, аналогичному fotolia.com (веб-сайт стокового изображения)

с css: 

parent {
   width: 42px; /* I took the width from your post and placed it in css */
   height: 42px;
}

/* This will style any <img> element in .parent div */
.parent img {
   height: 42px;
}

без 

<div style="height:42px;width:42px">
    <img style="height:42px" src="http://someimage.jpg">
</div>
0 голосов
/ 19 марта 2014

Ваш: 

  <div style="height:42px;width:42px">
  <img src="http://someimage.jpg">

Можно ли использовать этот код? 

  <div class= "box">
  <img src= "http://someimage.jpg" class= "img">
  </div>

  <style type="text/css">
  .box{width: 42; height: 42;}
  .img{width: 20; height:20;}
  </style>

Просто пытаюсь, хотя и поздно.: 3 Для кого-то еще, читающего это, дайте мне знать, если способ, которым я написал код, не был хорош.Я новичок в этом виде языка.и я все еще хочу узнать больше.

...