I have a number of image with a width of 100%. In every other browser this means that the image scales to fit its container, but in ie8 the images stretch vertically. Any ideas why? What can I do to prevent it.
You might be able to control images across multiple browsers more easily using a tool from imageresizing.net. Follow their installation instructions using NuGet, and then when referencing the image in your HTML use link parameters:
<a href="file.jpg?w=100&height=100&mode=max">
Check their basic commands documentation for other parameter options. I've used this tool for responsive web design and it scales fine using width, height, and mode parameters. see an example I implemented here.
Related
I'm trying to get images on my Hugo site to display full bleed (edge to edge) only on mobile/tablet view. In desktop view, I'd like the images to remain constrained within the parent container. I'm using Tachyons CSS.
I've looked into the solution suggested here but it would require me to re-design the whole site to implement the additional columns and it's not mobile-only.
Another option I considered was removing the padding on the content column in mobile view. This has the intended effect as far as the images are concerned but it also means the text runs to the edge of the screen which makes it hard to read. Not a good solution.
To see an example of what I'm trying to do, please have a look here: https://brianli.com/. You'll notice that as you resize the browser window the images fill the viewport from edge to edge. In desktop view the images only extend to the edge of the container.
I'm grateful for any help or guidance you can provide.
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
For some images I prefer to use scaling the image according to page size to make it responsive.
<img class="img_scale" src="img.png" alt"this img doesn't have width and height
definition">
css:
.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;}
This solution works perfectly if the image is not a billboard background image or in a not flexible box.. So I would like to scale image in stead of using a jQuery plug-in.
However, It is often said that scaling images causes repainting and alot of performance issues.
What do you do? Is there a solution to overcome performance issues with scaling images?
I guess it depends on what "performance issues" you are really trying to solve. If you are worried about time spent re-sizing in the browser or re-flow issues, then use max-width: 100% on the image and set the image container's width preferably using a responsive framework such as Foundations Framework or Bootstrap.
If you are worried about the time it takes to download images to a mobile device over a slow mobile network, then your image needs to be scaled or cropped before they hit the wire. Doing this on the client browser is too late. You can either do this on the fly or replace your img.src to one of several sized images based on breakpoints.
To scale or crop responsive images on the fly you could use a service such as Pixtulate. They provide a JavaScript which will automatically detect your container's size, send those dimensions to the server and re-size the image server side in real time before the page finishes loading.
Check out this article from Smashing Magazine. The author goes into great detail about anything you may want to consider, and possible solutions.
I have done about 20 websites which included the Business Catalyst gallery module. This is the first one that I'm having problems with and I don't know why. Please check out: http://topspindenver.businesscatalyst.com/gallery.html.
You will notice that if you make the window smaller, the gallery thumbnails start overflowing the window. In every other website that I've done, the gallery was responsive within the specified skeleton columns, and the thumbnails automatically get smaller, like on this site: http://mountaingardendiva.com/.
Does anyone know why this is happening only on this site? I have already tried specifically targeting the table that the thumbnails sit in and given it a max-width:100%, but it didn't work.
I'm guessing you're using Firefox to view this site and noticing this problem for the first time, because it looks fine in Chrome. It has to do with how Firefox computes the width of a table and the max-width of images within the table. You can solve the problem by applying a max-width to td.photogalleryitem with each media query that changes the page width.
It does work in Chrome, but to make it work in FireFox try setting the css on your images to width:100% instead of max-width:100%
I have found a relatively big image on the net and i set it as background in my web page. Though it appears in normal size..Is there any simple way to resize it in my html code?
Thank you in advance
You can use CSS3 background size property to set the size of the background image. - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. But it's better if you resize the image using photo editing s/w and use it as it is advisable to keep the size of a web page as low as possible.
WARNING
This is a CSS3 property, and it cant be assured that it'll work perfectly in all the browsers.
EDIT
To change the size of the image on the fly according to the browser size using jQuery check this - http://css-tricks.com/766-how-to-resizeable-background-image/