Как изменить размер всех изображений div до определенного размера?

У меня много изображений divs на странице. Как изменить размер всех этих изображений до определенного размера (размер эскиза)? В настоящее время все изображения показывают их оригинальный большой размер. Есть ли способ изменить размер этих изображений divs без изменения тегов изображений внутри этих divs, предпочтительно используя CSS?Как изменить размер всех изображений div до определенного размера?

<div class="ItemLeft"> 


    <div class="Clipping">   
    <a class="ImageLink" href="/videos/id8" title="galaxy"> 
     <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" /> 
     <img class="OverlayIcon" src="/Images/1.png" alt="" /> 
    </a> 
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a> 
    </div> 

    <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div> 

    <div class="VideoAge">1 daybefore</div> 

    <div class="PlaysInfo"> broadcast 265</div> 

</div>

источник

2013-03-21 user1788736

Теперь вы можете использовать для IMG ширина 100% http://jsfiddle.net/qdekP/ –

Вы можете просто изменить CSS либо для IMAGELINK или ItemImage классов в файле CSS.

Нечто подобное

.ImageLink{height: 100px; width: 50px} 
.ItemImage{height: 100px; width: 50px}

Это должно установить их все на ту же высоту и ширину.

источник

2013-03-21 04:21:34 DvideBy0

Вы также могли бы использовать пример joeframbach, если вы хотите применить тот же CSS для обоих, используя меньше строк кода. – DvideBy0

Большое спасибо. dvide есть способ показать изображение наложения в середине itemImage? Как? – user1788736

@ user1788736 Да, есть способ. вы можете установить z-index http://reference.sitepoint.com/css/z-index, который по существу позволит вам позиционировать что-то сверху или снизу. – DvideBy0

Может быть, вы ищете что-то вроде этого:

<style type="text/css"> 
    .ImageLink img { 
     width: 50px; 
     height: 50px; 
    } 
</style>

источник

2013-03-21 04:20:50

Лучший способ сделать это: img теги охватывают 100% от div.

CSS

.Clipping { 
    width: 300px; //your width 
    height: 200px; //your height 
    overflow: hidden; 
} 
.ImageItem { 
    width: auto; //or 100%. Auto is to keep aspect ratio 
    height: 100%; 
}

Этот метод является то, что я использую на своих веб-сайтах, поскольку она является гибкой для адаптивного дизайна. Вместо использования значения px для div используйте проценты для гибкости.

источник

2013-03-21 04:33:48

Лучший способ сделать это: сохранить общий стиль img (это применимо ко всем изображениям), вы можете установить размер для div или span. Изображение будет регулироваться в соответствии с вашим размером div или span.

img {max-width: 100%;height: auto;}

источник

2013-03-21 04:51:59 Vicky

Как изменить размер всех изображений div до определенного размера?

ответ

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