I'm using rails and bootstrap and I'm using the bootstrap carousel on my landing page. I found that on the mobile view the carousel starts to look quite bad unless I make the pictures much higher than wide.
I wanted to use an if statement in my erb file to check the viewport size and render the appropriate image. I don't think using media queries in css is appropriate in this case as the image size determines the size of the carousel (not simply a background image).
Sorry if this is a newb question.
Erb is rendered server-side, which really has no notion of the viewport size, you would need to resort to using javascript in conjunction with your code, to make the adjustment.
This seems like a perfect case for media queries in the css. This is a much cleaner solution than muddling around with js.
You can, in the carousel, draw both of the images. Give all the wide images a distinct class (wide-image, for example) and all of the tall images a distinct class (tall-image, for example). Then, in the appropriate section in your css, simply set the undesirable image class to display none, which will effectively leave you with only the appropriate images displaying (and governing the size of the carousel).
Related
I am using React and I am trying to modify the content of a component based on the viewport of the device.
The solution I came up with is to wrap in 2 separate divs the content for mobile and the content for desktop, and then to use CSS "display:none" and appropriate breakpoints to display either one div or the other one. I am sure there is a better and more efficient solution, but I can't find it.
I much easier way would be to use media queries. These allow you to basically alter your CSS based on the size of the browser/device and as the size changes you can decide how your page looks by adding CSS within the media queries.
Take a look at this site for further clarity:
https://www.w3schools.com/css/css3_mediaqueries.asp
I am using amp (Accelerated Mobile Pages Project) technology in a new project.
My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.
Likewise, the documentation says that the image will take the space of its parent container.
I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.
Thank you in advance for your answers
The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.
Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.
The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.
In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.
For more information about Restricting width of responsive images Click Here
I have troubles regarding a slider I have on my website.
Currently it's a slider with the <img> element. Problem I encounter now is that on mobile the large images get loaded as well. Now I want to load specific (smaller) images for mobile so that my website is faster on these devices.
A solution I had was using the media queries in combination with CSS background image. This is perfect to use because I can load the images with CSS and thus can use media queries to select the image based on screen size.
But the problem is is that I want to add the images to the SEO, they are essential for my website and I read everywhere that if you have such images, you need to use the <img> element. So that the SEO can work and include these images in the content. Also I cannot add ALT tags to background-image.
Another solution is rendering two sliders, one for mobile and one for desktop, and hiding the slider you don't want to see. Problem I have with this solution is that both of the sliders need to render, thus decreasing performance.
Is there a solution that I'm missing here? In my understanding you cannot change images in a <img> element with CSS media queries.
You can use the picture element. As the Mozilla Developer Network says, "[This element] serves as a container for zero or more elements and one element to provide versions of an image for different display device scenarios". I think it does the trick. Here you are another good article that explains how to use this element to achieve the result you need with your responsive images.
The picture element is a really nice modern solution. But if you want something more cross-browser, consider an approach with JavaScript. My solution for some websites was using sets of images with regular suffixes, for example image.jmg, image-medium.jpg, image-small.jpg, and a script checking the screen resolution. In the HTML only small images are included, but if the script finds the screen is big enough, it updates their src with corresponding suffixes.
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
I try to create a variable width website, but i have a problem with the images. I want to site to have bigger images and fonts on wider monitors, and smaller for normal ones. The solution i thought about was using percent, but the images (For the buttons, background and header) look kind of bad when they are resized. Is there another solution for resizing images and content dependeing on browser width?
Thank you
First thing to do is to check whether you really need those images. I haven'y seen them, so I assume you need them badly.
But you don't actually need any javascript to do that.
Depending on the audience you're targetting and the time you've got to build your website, you can try this to use CSS media queries to determine the width of the user's display. (You can learn more here: http://www.alistapart.com/articles/responsive-web-design/)
You can check the target display resolution with simple CSS conditional statements. If you know what kind of display types are the most popular among your prospective guests, you can prepare 3-4 different sets of various sized images for various users.
This way you can deliver different sizes of images to different user resolutions.
But first make 100% you need the images and you cand achieve the same effect with CSS.
You probably need a mixture of JavaScript and CSS; use JavaScript to determine the dimension of the screen, and use it to calculate the ratio for your re-sizing, and change the CSS property of the objects.
You may also want to use sizes in em instead of pixels when doing the style sheets.
When resizing images, you also have to keep in mind the aspect ratio, so you cannot just apply a percentage value to both the width and height.