I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high.
I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions
add_image_size( "portfolio", 300, 200, true );
What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..
Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)
How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.
Thanks
You can use the max-height rule from css to limit the height of all images equally.
eg:
.gallery img{
max-height: (some height);
}
Use % or em for the height, pixels might not work as well in a responsive design.
Related
I am trying to implement a full screen responsive image solution with the following loose requirements
0-600px > displays small image
601-900px > displays medium image
901-2000px > displays large image
After a bit of digging, I decided to work with the dimensions for:
iphone 6 > 414x736
ipad > 768x1024
I created separate images for each screen size (art direction purposes) and used the following srcset code
<img src="/assets/images/414X736/artGallery.jpg"
srcset="/assets/images/414X736/artGallery.jpg 414w,
/assets/images/768x1024/artGallery.jpg 768w,
/assets/images/1920x1080/artGallery.jpg 1920w">
The images have the following CSS (so it behaves like background:cover)
img {
display:block;
height:100vh;
width:100vw;
object-fit:cover;
}
I sized my desktop monitor small, and resized until full screen, the images where substituted at the right place
However, on my phones and tablets, it consistently showed the 1920 image
Ideally, I would like to substitue the images when scaling the browser window from small to large and large to small
My understanding of srcset is that once it's loaded the largest image, it doesn't load smaller ones
Help and suggestions appreciated
If you want to make some sort of Art Direction, you need to use <picture> instead of srcset-w.
By the way, your code misses a sizes attribute, which is mandatory if you use the srcset attribute with w descriptors.
I built this site via Google Web Designer (ZippyDriver.com) and want it to scale to my viewport but haven't figured out how to do it. I don't want a responsive site — just want it to stretch to the screen if possible. Any ideas???
Have you tried to change all your elements size to % instead of px dimensions?
You can achieve this by selecting any of your elements, lets say an IMG, then in its Properties -> Size and Position be sure it shows the IMG dimensions in % not in px.
After that, try resizing the viewport and see if it works.
I have a webpage with different images of different proportions. I want to display in the best format for different devices: desktop, tablet, smartphone, etc.
Is it best to use CSS3 #media (mx-width: ** px ) or jQuery $( window ).resize(function() and $( document ).ready(function() { with a change in the size of the image?
The last step works very well and does not require to set a lot of different media sizes as in the case of CSS3, but if Javascript is disabled it will not work.
Basically, I want the images to be responsive, but not with re-scaling of the screen of the device, which is what I get with the Javascript code, but offering the full width of the container div when the page and images are displayed in a smartphone. I think that the approach would involve PHP code to get the Client data ( $_SERVER['USER_AGENT'] ) because don't want images to be too big to go outside the screen, and when using a smartphone I don't want the images to be too small to be seen, and here I have the problem of screen resolutio: the pixels of the image can be 1200 px, but it is shown very small because of screen pixel density or resolution.
The best approach these days is using a technique called "responsive image sizes" along with good old CSS to handle image scaling on devices with similar screen sizes.
Using 'resize' event to manipulate the DOM with jQuery is a staging way to bad performance and bad user experience.
The core idea is to load smaller images on smaller screens and down-scale them in browser if image is bigger than required, using:
img {
display: block;
/* You should never upscale raster images in browser */
max-width: 100%;
height: auto;
}
Here is a good article, that covers the concept in details: Responsive Images in Practice
I would recommend checking out lazysizes, it implements lazy-loading as a bonus.
This is how you use it in your markup:
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
I have a Content Slider (All-in-one-banner sort of) on the home page of my website.
Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.
Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.
Please help me.
Demo link (Open in chrome):
When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013
The solution I could figure out is that one should NOT use an image with large dimensions.
For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.
I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked.
Another way to fix this is to use an svg image file.
So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.
Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper