Is there any way to make visible only middle part of the text/symbol(img1 blue lines). By default if there is not enough space inside of a text container then text is cropped only from the bottom side and we'll see only top part of the text. Yeah I know that I can set negative margin but in this case I'll need to set different values depending on the font size but I'd like to make it independent from the font size.
What is it for? I'm using Google material icons font. Some icons are smaller than required(for example arrow_drop_down is very small).in my case best size for it is 1rem but red part of my button(img2) should be much smaller. On img2, the red part should be ~3 times smaller and contain only that triangle.Now red's height = font size.
What you're trying to do can be done with adjusting the line-height.
Also live examples are always better than bunch of pictures , especially since this example would be easy to set up.
Related
I am building a website on Cargocollective.
I want to change the baseline to top of the image gallery. (Now based on baseline)
When I watch the source through Google inspector, I can find the code right this
but I can't find that css code in cargocollective CSS editing window,
and I don't know how I can approach to that.
help me!
and I want to know make image full to the square. (to be no blank in the square, even if the image is cut off somewhat)
How can I ?
You're using flexbox, wich means items are at the center of the height, if you want to change the baseline you would have to change the height of a row.
Or you could use flex start / flex end to set all images top or bottom
and I want to know make image full to the square
For this you want to research things like cover or contain
src (https://www.w3schools.com/css/css3_object-fit.asp)
Make the widht and height like 200px x 200px and make the child as the background. then use cover/contain
I want the height of the images between brackets to match depending on the height of the text in the center. How can I do that with css?
The orange color is the top/bottom margin of the text.
with a small text it should look like this:
with a big text it should look like this:
The images must adapt to all sizes and especially that they can be large to have a good resolution.
If possible without Javascript...
Here is what I tried: DEMO
In this DEMO, either the height of the image doesn't change, as in the first example. Either the width of the text doesn't fit correctly, as in the second example.
Thanks in advance
On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.
Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:
img.resize{
width:256px;
height: 256px;
}
You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?
In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).
Now, the black is shorter than the yellow.
use max-width and set the .item class's height... and overflow: hidden:
Fiddle
4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.
If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.
You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.
Situation: I want to display some text (or font icon) within a fixed height box. I can assume this will always fit on one line, so can simply use line-height to control the centering.
This works perfectly and shows two such boxes under each other:
<div class="box">a</div>
<div class="box">a</div>
.box {line-height:32px;width:32px;text-align:center;background:red;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif;}
https://jsfiddle.net/zj55racg/1/
Now, change the 5px vertical margin to 1.5px:
https://jsfiddle.net/jwg2ok3f/
In Chrome, I get the same nice-looking result. In Firefox however, the second box has the text visibly lower relative to the red box and does not look nicely centered at all.
Now while you would never use fractional pixel margins directly in the CSS, there is invariably text with a percentage line height, or responsive images, etc, throughout the page that results in fractional pixels being introduced. This means half the buttons throughout my page look nice; the other half look quite bad - the different is very noticeable.
Are there any ways the rendering can be worked around?
Image of what I see in case others can't replicate - the second a is a whole pixel lower in the red box than the first.
Simple question: I need an image to appear in the middle of a paragraph of text, however, the image is slightly larger than the height of each line of the font, so it pushes open a horizontal "gap" in the text to make room for itself. To fix this, I could:
1) Shrink the image, so that it is not larger than the font.
2) Use Position:Absolute
But I don't want to shrink it any further, it is small enough already to "technically fit" between each line of text, except that it would need to use up a few pixels of the white area above and below the line of text it is in.
And I can't use position:absolute, because then the image's position would be in the top left corner of the window, instead of in the paragraph where I want it.
I thought perhaps I could put a dummy "placeholder" image of size 1 pixels into the paragraph. Then, use Position:Absolute on my real image, and continually set my real image to be at the same location where the dummy image is. I haven't researched to see if that is possible, but it seems a bit excessive for such a simple thing. Is there an easier way?
EDIT: I found that adding: margin:-20px; to the image's style works!!!
margin:-20px;
JSFiddle example: http://jsfiddle.net/j7tLX/3/
Images are block level elements if you want them to appear inline with the paragraphs. Do this.
img {
display: inline;
}
You can use vertical-align: top
http://jsfiddle.net/j7tLX/4/
See http://css-tricks.com/what-is-vertical-align/