Paul-D Posted Tuesday at 08:15 AM Share Posted Tuesday at 08:15 AM I know this is a simple one for you but I would like to display images on a web page but this is a large image. Can I put it in a container that fixes it's size. <body> <a href="BillBen.jpg">It's a plant.</a> </body> I might want to contain mp4 videos in this also. Thanks. Quote Link to comment https://forums.phpfreaks.com/topic/330010-simple-on-how-to-shrink-jpgs-on-a-webpage/ Share on other sites More sharing options...
maxxd Posted Tuesday at 09:30 PM Share Posted Tuesday at 09:30 PM If it's a very large image, you'll be better off resize it in an image editor and save the download time and bandwidth. Images should only be (about) as big (in pixel dimensions) as they're going to appear on the page at 100%, otherwise you're degrading the image integrity by resizing it in CSS. If it's just a little bit bigger than 100% (say, 10-20% maybe), you can give the image an id and use CSS to define the dimensions. Or, in a pinch, use the height and width attributes. Quote Link to comment https://forums.phpfreaks.com/topic/330010-simple-on-how-to-shrink-jpgs-on-a-webpage/#findComment-1657694 Share on other sites More sharing options...
Paul-D Posted 19 hours ago Author Share Posted 19 hours ago (edited) Okay. I can re size using the <img> tag but for video, found a solution <video width="640" height="480" controls> <source src="HosePipe.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Edited 19 hours ago by Paul-D Quote Link to comment https://forums.phpfreaks.com/topic/330010-simple-on-how-to-shrink-jpgs-on-a-webpage/#findComment-1657719 Share on other sites More sharing options...
gizmola Posted 13 hours ago Share Posted 13 hours ago You can specify either the width or the height for an image, and it will size to that. Generally speaking you want to pick one or the other, and allow the other dimension to be sized relative to the one you specify, otherwise the browser will attempt to fit the image which if the ratio of width/height doesn't match will cause the image to skew. What maxxd pointed out, is that the browser will download the full image either way, so if the image is much larger than the place where you are using it, clients will still have to pull down the full size image, which makes things slower and eats up more of your bandwidth. One very useful css property to be aware of is object-fit. I frequently use object-fit: cover in styles for images, although there are other options that might be better for your particular use cases. It's also very useful for backgrounds, as you can do things like this: .canvas__bg-img { height: 100%; width: 100%; object-fit: cover; opacity: 0.15; } Quote Link to comment https://forums.phpfreaks.com/topic/330010-simple-on-how-to-shrink-jpgs-on-a-webpage/#findComment-1657728 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.