I am working on a back button for my website, I am not too sure how to make the button smaller. I tried adjusting the font size applying negative padding, etc. But to no avail I was able to get the button size to shrink while maintaining its round shape. Below is the CSS which I had applied on my button.
.fa-arrow-left{
font-size: 2em;
height: 100px;
width: 100px;
border-radius : 50%;
position: relative;
}
I am looking to strink the button to about 50% of this current size while maintaining the round shape as well. Appreciate any help on this. Thanks.
The detail you are giving is not really satisfactory. Try changing the width and height properties to lower values. If that doesn't help, you can use transform: scale(.5); but that is more than suboptimal.
If you are using font-awesome (as the fa-prefix suggests), changing the font-size should do the trick.
Try to change
height: 100px;
width: 100px;
As height and width are usually the parameters determining the size of your html elements.
You already set border radius to
border-radius : 50%;
So this will be applied no matter the size of your element.
Related
(Similar questions are already asked at stackoverflow, but this question has more constraints, such as both a specific max-width, max-height, a required specific height and width, and no layout shift.)
Problem:
I want to have a responsive image with the following constraints:
max-width: 100%, so that it doesn't overflow to the right, and that it is responsive when reducing the screen width.
max-height: 200px, so that large images are reduced in rendered dimensions.
height and width html attributes set, so that the browser can precalculate the required image dimensions, so that the layout doesn't shift/move elements beside/below the image, while the image is loading. (To reduce the cumulative layout shift.)
image aspect ratio should stay 1:1
no extra margins should be created around the image
the image should be rendered with a plain html img tag, not with css background-images
the image should not be rendered in a larger dimension than its original dimension
How can I achieve this with CSS?
(If CSS cannot achieve this, then maybe in JavaScript?)
What I tried
I tried several CSS features, such as object-fit and max-width: 100% etc, but I always get at least one of the contraints failing while trying to fix another constraint. For example, object-fit creates margins/paddings for the image when it's reduced in size when the screen size reduces, as if the image border isn't reduced. This is demonstrated in the following code:
https://codepen.io/Devabc/pen/mdVvyKq
/* Should appear to the right of the Wombat */
.beside {
float: left;
background-color: lightgreen;
border: 1px solid;
height: 200px;
width: 100px;
}
/* Should appear below the Wombat */
.below {
background-color: red;
border: 1px solid;
width: 100px;
height: 300px;
clear: both;
}
img {
display: block;
float: left;
max-width: 100%;
max-height: 200px;
border: 1px solid;
/* Without this, aspect ratio is not normal.
But with this, it creates an unwanted margin. */
object-fit: scale-down;
object-position: left;
}
<img
height="533"
width="799"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>
<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat.
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>
(The green text should be to the right of the Wombat, without margin. But object-fit causes a padding/margin to appear with the length of the original image.)
It's feels almost as if this isn't possible with CSS, even though these requirements shouldn't be too much to ask nowadays, with responsive design being important.
How can I fix this with HTML/CSS?
I've been struggling with this for years on end, but just today I figured a way to do it when you know the image's aspect ratio, hope it helps:
Start by defining a --img-ratio CSS custom property in the img element corresponding to the image's height / width ratio.
<!-- example of a square image (height / width = 1) -->
<img src="..." style="--img-ratio: 1" />
Knowing that our desired max-height is 200px (or you could go with a generic --max-height), we know 2 variables of the equation:
ratio = height / width
width = height * ratio
Applying this:
img {
--max-height: 200px;
/* Set a baseline width for your element */
width: 100%;
/* And limit it with our function above (pick 100% with min() if this size is bigger than parent's width to prevent overflowing) */
max-width: min(100%, calc(var(--max-height, 200px) * var(--img-ratio, 1)));
}
And there we go! This should work to limit the height without extra margins even in complicated flex layouts.
Let me know if this answer is unclear, hope it helps 🌻
PS: If you can't know the ratio of the image beforehand, than maybe JS is indeed your only option - I'm yet to find an alternative 😟
If CSS cannot achieve this, then maybe in JavaScript?
I wouldn't solve this with JavaScript. I understand you want to use width & height on img elements to mitigate content layout shifts, but in this case since you must have a max-height of 200px on the image, it will cause issues on images with larger natural width. The space you see between the green text & the Wombat is not margin or padding, it is that actual content width which you have defined as 799px.
You can solve this with a bit of preparation on the data you wish to present to the user. Prepare your width as you would expect what your image width would be. width=799 in this case is unrealistic because the image will not respond as far as that because of the max-height:200px limitation - same case with height=533. The whole point of using static measurements such as unit pixels is you are already declaring that this X element will just take Y space.
<img
height="200"
width="300"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
If your problem is that your webpage/website is not responsive, so I would suggest you to use Viewport Units like vw for width and vh for height instead of px or % for all your elements including border and font-size because it will help you make your webpage/website responsive.
It should solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
I have a word with a background colour. This is fine except that I want the background color a certain size in relation to the word. Simply putting background-color: blue,gives the word a background color and display: inline-block makes the color fit the word exactly. So far so good. The problem is as soon as I increase the font size, the background colour shape warps and either goes into a square covering half the word or goes into a line covering the width but not the height.
#media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}
<div class="about5">About</div>
This gives a background colour of blue which covers half the word but not the other half.
So how do I get it to cover the whole word and fit exactly, even to perhaps add a bit of padding?
Can I just apply width and height or is there another way?
Thanks.
The page is here and it differs according to desktop mobile.
I inspected the element on your site and saw that your about5 class has the attributes of width and height both set to 100px. Either you specified those dimensions or they were inherited from a parent element. Get rid of your height element only, then change width to auto and add padding: 3%. That's what ended up working for me in the Inspector for your site, although the code works just fine for me in this JSFiddle: https://jsfiddle.net/z0keyftb/
I'm using font-awesome for my loading notification, but it's driving me crazy that there is just a slight offset causing the rotation to have a "wobble"
html
<div class="loading-div fa fa-cog fa-spin"></div>
css
.loading-div{
position: absolute;
z-index: 9999;
font-size: 200px;
}
https://jsfiddle.net/69x2j60j/
I noticed that it's containing div is not square, but if I try to set height, width to static pixels it only gets worse... thoughts?
As you said yourself, the div isn't square so that's going to give you a bit of "wobble" as it rotates. Set the line-height (rather than height) and width properties to equal values and set text-align to center and it should smooth things out a bit for you.
If it you're still getting a slight "wobble" then it may just be a rendering issue in your browser. Font Awesome is, I believe, optimised to be displayed at 14px, or multiples thereof, so try reducing the font-size to 196px.
Here is an updated Fiddle with 2 animations, the first with the dimensions set and the second with the dimensions set and the font-size reduced.
And here's an extract with the properties relavant to the "fix":
.loading-div{
font-size:196px;
line-height:200px;
text-align:center;
width:200px;
}
To center horizontally, use this (relevant CSS):
.stripes{
text-align: center;
}
.loading-div{
display: inline-block;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/69x2j60j/1/
I have a div element in the shape of a circle using this code:
#circle{
width: 320px;
height: 320px;
background-image: url('image.jpg');
border-radius: 50%;
background-position: 50% 50%;
transition: all 1s;
}
That expands on hovering using this code:
#circle:hover{
margin-top:-50px;
width: 400px;
height: 400px;
}
Now this div element is inside another div element in the shape of a rectangle, or a box as some might say, that has a padding of 50px.
When the circle expands, the top part of the circle gets hidden under the padding. Imagine it like, the top part of the circle gets cut off, while the 50px padding is there.
What I want is, it will override the padding. it'll simply show above the padding, I hope you get what I'm trying to say here... If not, i'll try to explain in a better way. Thanks in advance!
Unfortunately there is no css that can access the parent element of an item.
I found this thread which outlines how you might accomplish this task.
You can use "position" or "display". I hope this http://css-tricks.com/absolute-positioning-inside-relative-positioning/ may help you
How you tried with z-index?
The round element
z-index: 2;
and the parent element:
z-index: 1;
I have an image with an original size of 900x300. I have an image container that has a size of 320x180. When I show this, the image looks squezeed. I understand it's because the ratio is not the same. So I am planning to show a zoomed version of it, but with just manipulating it's CSS. Is it possible? Also open to any other ideas that can show this image nicely using CSS tricks without having it looked squished in this box.
Here's a fiddle to play with. I am currently setting the width and height to 100% and hide overflow's.
It's because the ratio of your image is 3:1. You need to make your container size 3:1 as well... if you want your width to be 320px, then you have to set your height to 106px (106.6px to be exact), or something else proportionate to your original image. Here's an updated fiddle.
.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}
You'll notice it's now proportionate.
If you want a zoomed version then you can use css background property in css. Here is the code if this is what you wanted:
.box-container {
position: relative;
height: 180px;
width: 320px;
background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;
}
and remove the img from html.
this gives the effect of zooming
Your Question don't supply that what type of zoom you wants, But I can give you an idea, If you want that the image should be zoom at their place, with the full size then use follwoing CSS with the hover property:-
.boutique-grid .box-container:hover {
position: absolute;
width:900px;
height:300px;
}
See the fiddle here:-http://jsfiddle.net/npsingh/3m9aK/6/show/
Also If you like to provide a zoom with the popup then you can achieve this by following link:-
http://cssdemos.tupence.co.uk/image-popup.htm
If you want to crop the image with the center property and then use in that continer then you should be crop the image with the margin property, by that way you can crop your image with the same aspect ratio. See the post below:-
http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
Let me know if it will works...
.box-container img {width:100%;
height:auto;}
Add above code to your css. So that image will not squezeed.
Just remove the image element from the HTML and use background-image in your CSS instead.
Then you can use the cover argument for the background-size. This will take care of zooming the image to fit the box as well as keeping it proportional:
.boutique-grid .box-container {
position: relative;
width: 320px;
height: 180px;
background-image:url(...);
background-size:cover;
background-position:center;
}
MODIFIED FIDDLE HERE
With this approach you won't need to worry about re-calculating the sizes as the browser will do it for you.
Use the background-position to fine-adjust its position.
More details on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size