When I use my image-tag helper the image on the page is always smaller than the size of the image. Is this a rails thing or am I overlooking something? Even when setting image height to 100%, I can't get the full sized image. Any ideas??
Most probably the image size is predefined in your stylesheet/css, take a look there.
Or you could try: image_tag("/icons/icon.gif", height: '32', width: '32')
Resource is here: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag
You can try this code
<img src="img_location" alt="" style="width:100%; Height:100%;"/>
If your image size predefined by your css then it solve.
Related
I have tried to add the image in the page, but end up the image is too big for the viewport.
enter link description here
I tried some way that has been posted put none of them working. Is there anyway to do this without resizing the image by using fixed width/height
try to use
width : 100%
Here some update on your codepen
https://codepen.io/anon/pen/vjMWYo
try using max-width:100% on image. Something like this:
img {
max-width: 100%;
}
<img src="http://via.placeholder.com/1700x400" />
I've got a long page, built with Angular. The images on the page are lazy-loaded so that the src is not set until the image is scrolled into view.
The container is flexible and the images should never scale larger than their dimensions (which I know and can set on a style attribute)
Right now I've having issues getting the images without a set source to scale properly.
TL;DR
I want <img src='pic.jpg'/> and <img src=''/>to take up the exact same amount of space inside a flexible container with maximum sizes.
DEMO: http://codepen.io/chrismbarr/pen/xGgGRq?editors=110
HTML (this will be generated from JavaScript where we know the dimentions ahead of time)
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with a source
<img src="http://lorempixel.com/500/700/cats/2/" />
</div>
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with no source
<img src="" />
</div>
CSS
img{
display:block;
max-width: 100%;
}
img[src=''],
img:not([src]){
//no image source
height: 100%;
width: 100%;
}
Here's a demo of the image sizes being hard-set so they are no longer flexible. This is what I want to avoid: http://codepen.io/chrismbarr/pen/JdEYMe
In the case that you know the dimensions of every image ahead of time, I almost always recommend the combination of a plain ol' <div> and the background-image property. You don't have to pander to the idiosyncrasies of the <img> tag, and you still get support for animated .gifs.
I whipped up this quick Codepen to give you a feel. I use a directive to set the width and height, which are passed into an isolate scope, then set the background-image property when I detect the directive top offset is less than the height of the window. Quick, dirty, but simple implementation of what I think you're going for.
Advantages:
Aforementioned reprieve from dealing with the ever cantankerous img tag.
Ability to add some neat hover effects (trying hovering over one of the cats in the Codepen).
Drawbacks:
Detecting image load with a background image isn't quite as easy as using the img.onload callback available for image tags. You could likely create directive template that used a img to squeeze out this functionality. Up to you.
Hope this helps!
EDIT: As Chris mentioned in a comment, this technique still doesn't address the aspect ratio issue when the image containers are of varying widths. To solve this I get to whip out one of my favorite CSS tricks, maintaining aspect ratio with padding-bottom, written about by Nicolas Gallagher.
While unfortunately I don't have time to add the fix into my original pen (headed to work), I did create this to show an implementation using the same images. The padding-bottom of an element will proportionally scale as the width of an element increases or decreases, thus maintaining the element's aspect ratio.
that's kinda simple what you do is
<img src="img.jpg" width"20px" height"20px"/>
or any number of pixels and do the same with he other one
<img src="" width"20px" height"20px"/>
I am fairly new to html/css and I am coding a website for my mom. (Live example here: http://jleblanc.pancakeapps.com/index.html) and for the life of me I can't make the photos any smaller. Do you guys have any ideas?
If images are set in following format:
<div id="PlaceHolder"><img src="source.jpg"/></div>
You can add rule in CSS:
#PlaceHolder img{
width: 400px;
}
If you set height or width - it will automatically resize image maintaining it's aspect ratio.
Assuming you're talking about the oversize background images in your colored tabs, the problem is that you have background-size: contain set which is scaling the image to the container size. Choose another background size (background-size: (x)% (y)% maybe?
(You'll get better answers if you reduce your question down to the specifics of what you're trying to do and give example code of what's not working, rather than just linking to a website and asking what's wrong with it)
You can set image as responsive by making them size to 100% so they can fit any size.thanks
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)
JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
well you can set the image as a background of a div and then set the background-size property
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hover but you'd need to use javascript to change the properties onclick
You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
HTML
<img src="img.png" class="resize">
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
When I have an image from 950x500 and output it like so:
<img src="http://full/url/to/image.png" />
There is a weird 3px in height space below the image. When asking javascript about it, it will indeed say the size is 950x503. While the image is really (check multiple times) 500 in size. It appears that the image tag does this how can this be fixed?
Note that the image must also remain to function dynamic. So if I were to set width of the image to 100% the height will resize accordingly.
Try this instead of putting display :block; beacuse this gonaa effect all the image tag though there is no harm, but the right way is this :
<img src="http://full/url/to/image.png" height="950" width="500"/>
Never mind, the answer is, set your image display on block like so:
img { display: block; }