I try to change the size of paper-spinner.By setting the css height and width properties.
This change the size of the element but the element corrupted.
Their is a way to change the size that the spinner will be also small or bigger?
Set both the CSS width and height of the container element.
paper-spinner {
width: 300px;
height: 300px;
}
Related
I have an image element, it can contain any aspect ratio of the image (eg horizontal and vertical). I want to fill the page with it until either its height or width is 100% of the page.
I tried checking the image height and width and setting min-width/height to 100%. This worked very well for vertical images, but with horizontal images, sometimes the 100% height gets reached before the width does, (especially on 4:3 aspect ratio images).
Basically, I just want it to fill either the height or width of the screen, depending on what happens first.
Try with object-fit on image, so it fits it's container and chose the value that suits your needs best.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).
Here's a simple example, change the viewport dimensions to see the affect on the image:
.container {
width: 50vw;
height: 50vh;
background: gray;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="container">
<img src="https://picsum.photos/id/1015/768/1024"/>
</div>
I am trying to insert full width hero image. Problem is based on the original height of the image, it's getting too short on mobile device.
Large Screen:
Mobile Screen:
Basically, I wanted little bit bigger height than the calculated height on mobile screen. So, I thought it would be good if I apply a min-height to the image.
So, I have added this:
img {
min-height: 300px;
}
Surely, it's not the way.
How to fix this?
Code Demo
You need to wrap the img block in the parent block. Then in the parent block to set the minimum height, and in the img block to specify width of 100%. This will preserve the aspect ratio of the image, and its height will be either greater or as the parent, but not less than that set in the parent block. Of course, the parent block must inherit the entire screen width from its parent block or explicitly have a width of 100%. For example:
.block__image {
/*width: 100%;*/
min-height: 300px;
}
.block__image img {
width: 100%;
}
<div class="block__image">
<img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>
I have an image tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?
.img-test {
width: 33.87%;
position: absolute;
max-width: none;
}
.clothes {
background-color: #d04925;
float: right;
height: 805px;
}
The image and the div with the .clothes class are one next to the other and it should stay that way.
You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools
Hello and welcome to StackOverflow!
You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.
.img-test {
width: 33.87%;
min-width: 300px;
}
In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.
So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.
Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.
You need height attribute to be set to some value to prevent image from resizing. Example
.img-test{
height: 200px;
position: absolute;
min-width: 300px;
width: 33.87%;
}
This will help. Unless the image is inside a div whose height is changing.
i'm trying to set the to custom size, but in css the height command is not working…
How can i set to custom size?
I need this to my image slider, but the col-sm-10 is too high in my website.
Waiting for the help!
To change the height of the carousel you have to use 'vh' like this:
.carousel {
width: 100vh; // if you want 100% of the height, or what you want for the height
}
I need help making my image take up no width on the HTML. What I mean by this is when you shrink the width size of the window, I don't want the image affecting the horizontal slider. I would think overflow:hidden; would work but the right side of the image takes up space on the HTML document.
You could add max-width: 100% to the img element. In doing so, the img will never take up more than 100% of the width of the parent element.
img {
max-width: 100%;
}
Alternatively, you could also use max-width: 100vw (which is 100% of the browser width's width).
img {
max-width: 100vw;
}
Use a width: 50%; instead of px. Play around with which % value best corresponds to your image width. That way the image will automatically adjust to the browser windows size.