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
Related
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
I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
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'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I try to create responsive HTML elements whenever the browser width is wide enough, it fills with 3 horizontal box elements whose content can be text or an image. When text content doesn't fill the whole box, it leaves some empty space so that it doesn't wrapped around the box.
However the text content can fill the box. Whether the box is filled or not, it should have same dimension unless the browser dimension changes.
When browser dimension is widening, the 3 elements should stay with the original dimension. But when it is narrowing, the 3 horizontal elements can reduce to 2 horizontal elements, leaving the other element to new space. And it can be 1 horizontal element if the browser space is narrow enough.
There can be many 3 horizontal elements, like this:
X X X
X X X
X X X
They're stacked like a table.
When the content is an image, its size must comply to the box dimension not the other way around, so it shrinks when the original image is bigger than the box or stretch when the image is smaller.
so far this is what I have
my JSFiddle link
The code above have a responsive horizontal box. Also the picture doesn't comply to the box but vice versa.
Please advice.
Responsive design won't be obtained by using Width and height elements.
Try setting these to Min-height / Max-height etc..
Also if you really want to keep it responsive then you should just install the bootstrap framework and use
col-md-4 to achieve this much easier without having to worry about css styling etc..