I have a web slider with an image in it. I've asked my designers for an image of the highest possible dimensions that I'd like to support (1920x1080 browser window).
This looks great at the highest resolution, but as the browser window gets smaller and smaller the image doesn't scale appropriately. I'm not sure what techniques I should be performing to make sure an image like the one in the example above is scaled down appropriately as the window size changes.
Should I ask for various resolutions of the same image from our designer? And swap out the image using media queries in css? Or is there some other way to properly do this in CSS using background image size, etc?
Edit:
So the image was created with text and graphics. The problem may be that there's no way to support this on various device sizes. How do other people/companies handle images with text/graphics as part of the image, and not over on top of it?
Try Applying max-height:100% & max-width:100% to the element you wish to remain scaled.
I.E
<div class ="wrapper">
<div class ="image">
</div>
</div>
CSS
.image{
max-height:100%
max-width:100%
}
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I have a site that still uses Drupal 7.x. I have a top banner that works fine on a large screen with greater than 1100px. However, that same banner will not work on smaller screens, especially not on smartphone size displays. So, if I put the banner into a block with an image tag, how can I change the source image for different display widths?
I tried using a percent width and media queries for the different background images. I haven't found a way to style the background image so that it resizes as a percent of the viewport. It will change the background image based on the media queries but I cannot get the alignment or the percent width of the background image to change with the change in the width of the viewport.
Thanks in advance for any advice on how to manage this issue. Maybe there is a module that handles changing the content of a block based on the size of the viewport.
If the banner doesn't fit on your smaller screen, try using background-size: contain or background-size: cover.
It should be possible to archieve this using CSS only, without the need to have different images in all media queries.
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.
I am making a site with a media query for when the browser width is <768px.
When the browser is <768px, I want an SVG background image (my logo) which is 100x100 regularly to become reduced to 80x80.
Is this possible with SVG graphics to be reduced in size with media queries?
Yes it's possible, some examples here and here.
But, if you mean reduce the size you're probably talking more about the size determined by CSS, not by the svg itself (the svg should just redraw into the region given by CSS as long as it's done correctly).
Use % width for your Logo Image accroding to device the logo width and height will reduce.
I am using the responsive image technique, which is to set max-width to 100% to resize my images according to the screen resolution/size. However, when I put the image inside a div that has a percentage width, the images do not appear crisp (since I surmise, it has been resized via browser). The text on the image is quite blurred. Is there a way to make it look crisp? Or at least to make it look crisp on the most common screen size?
CSS:
img {
max-width: 100%;
height: auto;
}
.img-container {
width: 57%;
}
HTML:
<div class="img-container">
<img src="[img source]" width="700" height="500" />
</div>
If you've got a large image that's being scaled down, resize it in a vector graphics program first, then save it as the preferred size, and serve that to the client.
If you've got a small image that's being scaled up, you're going to lose resolution, no option.
This isn't really a CSS/HTML problem, just FYI, it's a scaling problem. Various browsers will use various scaling algorithms, so the results will not be consistent. You've got to grab the controls and force the browsers to show the image you want, without scaling. One of the practical drawbacks to the theoretical beauty of "responsive design".
Use SVG if you have non-photographic images
Use slimmage.js for photographs.
Manually exporting 14 image versions to support the 2013 range of resolutions is madness.
use SVG images or use a plugin called picturefill.