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

    How do I style DIVs inside a checkbox label based on if it is checked or not?

    How to add the img-responsive class in javascript

    how to implement background img

    How can I resize images that are loaded onto a page?

    How do I conditionally apply CSS styles in AngularJS?

    How to use css classes in Best way without redundant?

    How to target table with ID?

    css How can I make the page body stay the same size even if I add element to it?

    How to split a div into multiple rows and columns in css?

    How to cancel an upstream CSS declaration?

    How to use css to style xhtml markup made only of divs like a table [closed]

    how to add scrollbars to (a potentially infinite) canvas using fabric.js

    jQuery, how can i do to toggle a margin

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    Webpage Css Error.. Not Showing Anything

    How to make this html code and css be in mobile app?

    How to get value of input using Jquery and put it in css of an element

    How do I detect a transition end without a JavaScript library?

    how to select one element in jQuery

    how to have the text under the logo css

    How to apply “-webkit” css rules using jquery .css

    How to add specific CSS attributes to all text-containing elements

    How to override CSS code with a new class?

    How to apply remaining width to a div in the middle of 2 other divs

    How to disable a CSS class with javascript on window.load()

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    How to double an image size in HTML using only CSS?

    How to display a child div BEFORE the parent div?

    how to change css after some seconds continously?

    How to include a css stylesheet in Orchard module?