I have an html5 video element that is sized with css to cover the entire screen.
video#myVideo {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
I have the poster attribute set to an image that I want to be a smaller size (e.g. 100px by 100px).
Is there a way to access and set the poster css, e.g. video#myVideo[poster]? Or any ideas how I can change my css to both cover the screen for the video and only render a smaller poster image?
Updated explanation:
The goal is to have the video cover the entire screen when there is a source and the poster image (or another separate image) only cover a smaller section (i.e. not stretched to 100%).
My current attempt is to not use the poster attribute and instead do:
<div>
<img ... />
<video ... />
</div>
Related
There is an image of a coffee cup. I am trying to achieve a functionality where even though the window size is decresed the image of the coffee cup stays visible and also there is no change in its actual size.
Currently what is happening:
Above picture is the initial state where i have not started to decrease the window width.
In this picture we could see that till there was margin in the left side of the image then upon decreasing the window size both right and left space decreases uniformly but after that the left side became static and only right side started to decrease making the cup to disappear.
Here is the css code:
.App {
text-align: center;
border: 2px solid black;
width: 70%;
margin: auto;
}
Here is the react code:
<div className="App">
<h1>Hello</h1>
<img src={cupImage} />
</div>
Please guide me on how i could achieve my required functionality using css or some other way. Also let me know if more information is required.
First, set your image to the width of its container with width: 100%.
Then you can use object-fit and set its value to cover. The image will fill the height and width of its container while maintaining its aspect ratio, cropping the image in the process in a centered manner.
You can then give img a height or a min-height.
img {
width: 100%;
object-fit: cover;
min-height: 200px;
}
MDN docs: object-fit
I want to display a bunch of images stored on a server. The images are taken from a user's phone and the dimensions and aspect ratio are unknown.
I just want to have an image fully fill a DIV while maintaining its aspect ratio. If the image is wider than taller, I want the image scaled so the height is 100% the Div and the sides would be clipped off. Similarly for if the image is taller than wider, I want the image scaled up/down so the width is 100% of the Div
Hopefully this explains it
I thought this would be pretty trivial, but here i am. I can make an image fit tall or wide but not either depending on the aspect ratio. I've tried several different methods and I am at a loss.
I have a Stackblitz Example here.
I have a 2x2 grid, and I would like to get the images to fill those grids. Some images need to be rotated. I'm not sure why they need to be as the look normal on my computer. I have a hardcoded flag to force a rotation on some images, but the rotation appears to screw up the css further on.
CSS:
.img-container {
/* height: 150px; */
width: 100%;
}
.img-container img {
height: 100%;
/* height: -webkit-fill-available; */
width: 100%;
object-fit: cover;
}
HTML:
<div class="showBorder img-container">
<img #image class="container-img-objfit2"
[ngClass]="{rotateLeft: rotate}"
[src]="imageURL" />
</div>
How can I fill these DIVs regardless of the aspect ratio?
Can I do any of this inside angular? I tried to get the image size and see if I could set custom class that would handle the rotation, but that didn't seem to work either. The dimension for all my pictures was identical. So no way to distinguish which pictures need rotation.
Or am I going about this all wrong? Ultimately I think I will have a process to scale and crop the images on the server so they are prepared for the client app.
Update:
This sample is an attempt to set the image in the background and use a :before selector to rotate the image. It does not work fully as I cannot change the image dynamically to other images.
You can just set the images as background-image for the div and set its size to cover.
So just remove the img tag and keep your div tag only
<div class="showBorder img-container" [style.backgroundImage]="'url(' + imageURL + ' )'">
</div>
In CSS you will have to specify the height and the size
.img-container {
height: 150px;
width: 100%;
background-size:cover;
}
I like to do a client side crop and resize of an image before displaying it in HTML 5. (The actual react application will allow to select a part of a bigger image that is displayed in a fixed size image window)
I know the offsets in pixels (x and y) in the source image and the scaling factors for width and height needed.
I can easily crop (without scaling)
<div style="overflow:hidden; width:300; height:300;">
<div style="display: inline-block; background: url('test.png') no-repeat; background-position: -10px, -10px;" />
</div>
Scaling works, but cropping get's corrupted when I include scaling
<div style="overflow:hidden; width:300; height:300;">
<div style="display: inline-block; background: url('test.png') no-repeat; background-position: -10px, -10px; transform: scale(10, 10);" />
</div>
CSS clip-path is a pretty versatile CSS property that does exactly what it sounds like you need to do. It can get lengthy, however, so I highly recommend moving to an external stylesheet as opposed to doing this inline.
What I would suggest is that you set the image in a fixed-size container, as you stated, set overflow: hidden; (of course), and crop the image with clip-path. For resizing it, use transform: scale() with one parameter, depending on how much you need to scale it.
Keep in mind that another rule could also be used like CSS object-fit.
I found the following solution
<div style="overflow: hidden; width: 300px; height: 300px;">
<img src="test.png" style="width: 600px; height: 600px; transform: translateX(-300px) translateY(-300px);">
</div>
The important aspects are:
Have a size limiting container (the div) with overflow: hidden
Resize the complete image by scaling the width and height
Crop the needed parts from the resized image (with transform translateX translateY)
Is there a way to include images in AMP without knowing it's width and height?
I have tried layout=responsive, but it stretches the image as per the given height and width instead of making it responsive.(Original image's aspect ratio is not maintain, instead the given height and width value's aspect ratio is maintained).
I have also tried layout=fill, It maintains aspect ratio but it creates padding if the given height/width is larger than original image's height/width.
If anybody can help me with this problem, as I don't know the dimension of image and want to load it with correct aspect ratio without padding.
AMP has a static layout, which means the height of every element must be known in advance. This is why there is no way to embed images with unknown dimensions. There are two workarounds:
1.) Define a fixed height container and let the image fill the available space while maintaining the correct aspect-ratio (this might result in some padding). This is possible by combining layout=fill with the object-fit: contain CSS property.
.fixed-height-container {
position: relative;
width: 100%;
height: 300px;
}
amp-img.contain img {
object-fit: contain;
}
<div class="fixed-height-container">
<amp-img class="contain"
layout="fill"
src="https://unsplash.it/400/300"></amp-img>
</div>
2.) The other option is to crop the image to fill the available space.
.fixed-height-container {
position: relative;
width: 100%;
height: 300px;
}
amp-img. cover img {
object-fit: cover;
}
<div class="fixed-height-container">
<amp-img class="cover"
layout="fill"
src="https://unsplash.it/400/300"></amp-img>
</div>
You can find a working sample of the different patterns on ampbyexample.com.
I have an image, its 120 x 90 px for example. Now I want to display a smaller version of that image, with 80 x 50 px for example. I know I can use width and height which will work for images having the same size.
Now my problem is that I have different images, which have a different original size and just using a static width and height will make some images look strange (because the proportions are messed up).
How could I handle such cases? Is it possible in pure CSS, or do I need some JS?
Thanks!
We call this dynamic divs the image will resize when de div is smaller or bigger.
An example
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
<div style="max-width:500px;">
<img src="..." />
</div>
FIDDLE note: if you resize your browser window you see that the image is resized too.
If you make a small div the image is small too. etc.