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..
No need for jQuery, you can do this entirely in CSS: <style> .interest_selected_icon { display:none; } input[type=checkbox]:checked + .interest_select .interest_selected_icon { display:block; } </style> ...
Previous answers are correct but you have to use $ for jQuery: $(slideimages[0]).addClass("img-responsive"); WIthout jQuery: slideimages[0].className += "img-responsive"; ...
I would go with the html tag: html { background: url('http://i889.photobucket.com/albums/ac93/aussieking/background_image.png') center center; background-size: cover; } ...
The easy way is with CSS: .images img { max-width: 200px; } This will render the images in the desired maximum size, while maintaining the original proportions. Note: resizing with...
Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically: ng-class - use when the set of CSS styles is static/known ahead of time ng-style - use when...
You can define similar css at one place with joining multiple selectors and overriding later if necessary: Note: The styles that you are overriding i.e for .error and .success must...
If you want to hide the header of the outer table: #userList thead { display: none; } If you want to hide all of the headers of the inner table:...
first of all i would reset the margin and padding of the whole page: * { margin: 0; padding: 0; } More info. This way some default paddings and margins...
You can do something like this div{ display:inline-block; float:left; color:#fff; font-size:40px; } .one{ width:150px; height:200px; background:red; } .two{ width:100px; height:200px; background:lightgreen; } .three{ width:100px; height:200px; } .four{ width:100px; height:100px; background:darkblue;...
Just use the :not() selector (the * is implied): :not(button) { margin: 0; /* applied to all elements except <button> */ } Read more at https://developer.mozilla.org/en/docs/Web/CSS/:not...
"Give a man a fish, and you feed him for a day, teach him to fish, and you feed him for a lifetime" Ok here we go. If started...
Adding to Benicks answer - you can call the canvas.on("object:moving", function(e) {}) which is triggered when an object is moved. So the wrapper will have the follwing css: #wrapper{ position:...
Quick and dirty, this would work, although I doubt this is best practice. var positiveMargin = false; $('.LoginButton').click(function () { if (!positiveMargin) { var marginTop = "33px"; positiveMargin = true;...
I think my codepen could be usefull for you. http://codepen.io/SzymonDziewonski/pen/gLebo Try to use vertical-alight with display: table-cell and your center vertical align will work for fluid heights. Good luck :)...
Change the below css #numholder { font-size: 0; } To #numholder { font-size: 12px; } or remove the below css code from your css #numholder { font-size: 0; } ...
If you want a mobile app you need to create a mobile app using the programing language for whichever OS/device you choose. You can then use webviews to display web...
Use this: jQuery(function($) { $('#color').on('keyup', function() { var color = $(this).val(); $('#color_result').css('background-color', color); }); }); ...
element.addEventListener('transitionend', function(event) { alert("CSS Property completed: " + event.propertyName); }, false ); For now, the exact event name has not been standardized. Here's a quote from MDN: There is a...
I would completely remove the inline CSS and toggle a class on your buttons instead. You already have all the css colors in your :hover styles, simply adding selectors to...
see how to do it in this example http://www.ironspider.ca/graphics/alignment.htm the idea is play with align attribute in image (put the image in the same paragraph ) and put a space...
Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style. /** style.css **/ .foo {...
You could append a style to your <head> element, targeting all elements (seeing as font family would only apply to text elements anyway). So, in your javascript, you would append...
You need to remove the space between li and .noborder definition. /* v-----------< The space here */ @media (min-width:768px){navbar-nav>li .noborder{ /* Before change */ @media (min-width:768px){navbar-nav>li.noborder{ /* After change */...
Classically, this would look like this: CSS: #div1 { float:left; width:400px; height:200px; background-color: gray; } #div2 { margin-left: 400px; margin-right: 400px; width:auto; height:200px; background-color: silver; } #div3 { float:right; width:400px;...
Here is a working example of what you have requested: http://jsfiddle.net/ALLew/ In the example: all ULs are yelow items with class rtsULmenuLeft are red items with class rtsULmenuRight are blue...
To get them all to face to the front you can rotate, then translate then rotate back again eg .ring > .two { transform: rotateY(40deg) translateZ(380px) rotateY(-40deg); } In the...
You can't using CSS < Version 3 only. When you set the width/height on an element it is relative to it's container. Update, as it's been quite some time since...
A solution would be to use the order flex property: body { display: flex; flex-direction: column; } .image { order:-3; } <div class="first"> first </div> <ul> <li>li</li> </ul> <div class="image">image...
Try this similar one with css and jQuery $(document).ready(function() { setInterval(function() { $("circle").attr("stroke", "white"); setTimeout(function() { $("circle").attr("stroke", "black"); }, 500); }, 1000); }); ...
If you want to include your stylesheet in a view, you need to specify this at the top of your view. Where the name of your stylesheet is the filename...