How to resize all div images to a particular size?


Tags: html,css

Problem :

I have many image divs in a page. How do I resize all those images to a specific size (thumbnail size)? Currently all images shows their original big size. Is there a way to resize those divs images without changing the image tags inside those divs, preferably using CSS?

<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>


Solution :

You could simply alter the css for either ImageLink or ItemImage classes in your CSS file.

Something Like This

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

This should set them all to the same height and width.


    CSS Howto..

    css: how to build centered div with minimum spacing on the left

    How do I force span elements to remain in place between variable length text and an image element?

    CSS delivery optimization: How to defer css loading?

    Understanding float and how and when to float an element in CSS3?

    How to make a dynamic html form using css and js

    How to make a “Fixed” element Scrollable

    How do I get these hover effects but with diamonds instead of circles

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How to break up an HTML List using CSS Only

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to add a background image or theme through CSS?

    How to make a GWT-like CaptionPanel manually

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How do I mask a region of the page in a responsive design using CSS?

    How to get style of a div from javascript file

    Show 100% of background

    How can I create a CSS “well” effect similar to bootstap but deeper?

    How to have complex shadow background on variable height content area via CSS?

    how to make a div to wrap two float divs inside?

    How to make div height fit the content using css

    How is does Jquery display a tooltip on this span element?

    How can I remove borders around images on Blogger? [closed]

    how to change CSS priority (don't use !important)

    How to test .css file for syntax errors?

    How do I get text in my html page to display features using the css stylesheet?

    CSS dropdown menu not showing the full texts of submenu items

    How to get a small div bar to slide down a menu on mouseover

    How to disable webkit-text-size-adjust with JavaScript

    How to Toggle CSS3 Accordion on Click