I am not sure whats going wrong but when I am using a flash file in the web page when I am setting size
style="width: 445px; height: 386px"
white strips are embedding sideways automaticaaly,,
while using the same page with size
width="450" height="440"
no white strips appear.
It might be the problem associated with the aspect ratio.
Is there any way to set these white strps to transparent????
or to remove these strips?????
Can we see a link? Or some code? It appears to be an aspect ratio problem because the width and height are definitely a different aspect ratio in your second scenario. Or if the white strips are the flash stage, you can also set wmode to transparent, and the html background will show through.
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 already tried using width and height 100% on it, but the issue that arises is that the frame itself takes the whole width and height, but the video keeps its aspect ratio, with a large grey frame around it. Using embeds from Vimeo and Youtube works well, but this issue arises when I use a custom CDN-based video - which is what I need.
Have you tried doing min-width: 100% on the iframe? If the page is not full size, then it might be taking up the width of that. So you could also try: body { height: 100vh; }
My first guess was to just make a CSS rule selecting the element inside the iFrame. But tt seems as you have to do it with Javascript and change the CSS of the loaded page in the iFrame. CSS is rarely able to do this on its own.
For more information see:
How to apply CSS to iframe?
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
I want my canvas and background image to scale to any browser size which I have learnt is possible through this.
<canvas id="canvas" style="width:100%; height:100%;
background-size:100% 100%; left:0px; top: 0px;">
Setting the width and height using percentages causes whatever I draw on top to come out blurred.
The reason for this I read is that it comes out blurry because the width and height of canvas set using css is different.
It is absolutely imperative that I keep track of the co-ordinates since I have written a collision detection logic using the original size of the image.
Is it possible to dynamically change the canvas size to fill the screen, redraw it and ensure that the collision logic works perfectly without blurry drawing on top?
Lets take an example here. The image floor.jpg that I want as the background of the canvas is 1200X700. I want the canvas to be 100% of the page width and height. My animated player that moves on top of it requires collision detection with walls which I have coded keeping in mind the 1200x700 image.
I have gone through the various similar question on this site, but can't seem to figure it out.
Is it good practice to set the dimensions of an image (in static content), even if I have cropped the image to the correct size and it's container has fixed dimensions and overflow:hidden ?
<img src="" title ="" alt="" width="100" height="100"/>
Generally you should provide the height and width tags, so that the browser can reserve the needes space for the image. Else, the layout may change during the loading of the page.
As you have a fixed size container and overflow: hidden, it probably won't help much though. But even if it doesn't help, it does no harm either. So you should stick with always adding height and width attributes.
http://www.w3schools.com/tags/att_img_width.asp (See the tips under "Definition and Usage")
I don't have hard data to back it up, but I think I have seen browsers that showed a rectangle in the image's place until the actual image was loaded. To show that rectangular area correctly, browser would need width and height data.
Also, some browsers will show a rectangle instead of the image when images are turned off or can't be loaded. For correct sizing of the rectangle, dimension info is also needed.
I think it won't do any harm to set it.