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
Related
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.
I have a layout with two columns. On the left, a variable size image with some descriptive text below, on the right, some text with headings, data fields and so on.
If the image is large, it looks ok:
(note here the image is using .img-responsive and is actually about 320x320 when viewed, depending on browser viewport size).
If the image is small, I don't like the alignment:
Ideally I would prefer the small image appear vertically and horizontally centered, with the descriptive text ("150x150") aligned to the bottom.
Is this possible, ideally using Bootstrap 3 classes, otherwise is it possible at all?
Here's my current code (note the white border is not included because this is from a custom Bootstrap style sheet): http://www.bootply.com/szAeKcB7HP
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.
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
I have a mentor that told me that instead of editing the height or width of the "li" tag that I should just edit the padding or margin of its content like lets say the "a" tag or "p" tag until i reached the desired size. Is it true? is it really not advisable? Thank you in advance that can clear this one up.
Looking at that picture, I think they meant two things:
You must make sure that the clickable area (the size of the a element) is the same as the area that look clickable. If your li element has a background color but the a element inside doesn't cover it completely, it's really annoying because you have visible areas that aren't clickable.
If you use padding, the items will adjust their size depending on the text size, e.g. if somebody decides to put in more text or the font size changes, the element height will adjust accordingly.