Force CSS to square image in a responsive container - html

I have a responsive image grid background in my website.
All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.
Example OK:
[H][H][H][H][H][H]
[H][H][H][H][H][H]
[H][H][H][H][H][H]
Example FAIL
[H][H][H][H][H][H]
[H][H][H][A][H][H]
[H][H]
[H][H][H][H][H][H]
I dont want to use mansory o other plugins, this is my code:
HTML
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
CSS
.resp{
width:10%;
height:10%;
}
.resp img{
width:100%;
}
Im using Bootstrap 3. Is it possible to do it?
EDIT WITH MORE INFORMATION
I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:
Is responsive and I need to use % in with to adjust perfectly fullscreen allways

There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.
If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.
As a code example of point two above:
.resp a{
display: block;
max-height: 300px;
overflow: hidden;
}
Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.

You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.
This is one linked image in a div, not a grid:
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>

<figure><img src="images/edu.jpg"></figure>
figure img {
width: 100%;
}

Related

Overlay image into another div

if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle

Bootstrap : block image resizing

I'm using a YouTube picture below one for example :
and Bootstrap to display it:
<img src="{{img}}" alt="{{title}}" class="img-circle" width="60px" height="60px">
But the picture is crushed:
Am I missing a bootstrap property ? or a common hack ? Thanks !
Edit :
I finally found a trick to do the job :
<div class="crop">
<img src="https://i.ytimg.com/vi/EONhJ9qvCPY/default.jpg" alt="#" >
</div>
And
.crop{
width: 60px;
height: 60px;
overflow:hidden;
position:relative;
border-radius: 50%;
}
.crop img {
position: absolute;
left: -27px;
top: -18px;
}
What do you mean by picture is crushed? You're against the picture being in a circle, or the way it displays in the circle?
I think first of all it's crucial to understand, bootstrap as in whole is a framework containing rules for html, css & javascript. So to answer your question, there is no property/hack orso you're missing.
The reason why it displays like it displays, is because the image does not properly fit into the 60x60 image (or rather the crop of it in the circle) therefore, it crops out the parts that do not fit.
What I'm saying is, although it may not visually look like it, it still takes the 60x60 block and just puts a circle inside it and renders the outskirts transparent. There is virtually no way to avoid this, other than resizing the original picture.
So either
a) Edit the original picture in mspaint/photoshop/gimp whatever so it will fit better inside the circle crop
b) Go inside the bootstrap CSS properties and change the width and height properties of the img. Alternatively set a max-width and max-height for the images so it will not be stuck inside the 60x60 definition.
img {
width: value;
height: value;
}
The reason why you'd want to do it like that, is because in case you will want to use such an image in future, you will not have to specify the width and height properties through HTML code (which is causing you unnecessary displaying issues and code-readability problems to begin with), but it will automatically apply it to every element using the CSS rules.

Setting up a container to be of an exact width with twitter bootstrap

I have a header image for a layout that I'm working on that is 1200px wide. The layout is fixed.
I'd like the container that wraps this image (and any container that wraps it up in the DOM hierarchy) to adapt to the 1200px. First thing I thought on doing was to just:
.container {
width:1200px;
}
It works, but then what's the point of using bootstrap? And also, I'd probably be messing with the grid by forcing a width this way, right?
So, I tried to setup the grid to add up to 1200px, but still keep 12 columns, like this (I'm using sass):
$grid-column-width: 70px;
$grid-gutter-width: 32px;
However, I could only approximate (or go way above) 1200px, while keeping 12 columns. In this case, I got 1192px, which works, but is not optimal.
Here's the markup I'm using:
<div class="container">
<div class="row-fluid">
<div class="header-photo text-center span12"></div>
<div class="row-fluid">
...
</div>
...
</div>
</div>
And here's the SCSS that setups the header div:
div.header-photo {
background-image: url(/images/header-photo.png);
width: 1200px;
height: 368px;
h2,h3 {
text-indent: -99999px;
}
}
So, if I use span12, the other divs adapt to the size of the header-photo div, but only up to 1192px.
What would be the best approach to get the container to be of exactly 1200px?
force it with a CSS rule (like I tried doing) ?
A combo of the grid conf that I'm clueless about?
Tell the designer to make the header photo smaller/bigger so it adapts to another value?
... ?
Any hints highly appreciated!
Thanks in advance!
you should fix the container value by opening the bootsrap gem

Keeping width/hight ratio and using div normally?

Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.

Using Background Image to Display An Image in BooStrap

I just finished building part of my website using Twitter's BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.
I don't like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:
I don't know how to specify the height of the div as this is a
variable based on the height of the image. The width will always be
of span4 (300px). Each image will only have a few words at most
therefore not enough to take up the entire vertical space of the
div.
As the browser width shrinks, part of the background div gets
cropped off. This is because BootStrap is trying adjust for
responsiveness. How would I fix this?
I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?
My code:
<div class="span4 cell">
This is a placeholder image
</div>
.cell { background: url(http://www.placehold.it/300x200) no-repeat; }
Just to be clear, here is an image of what I am trying to create:
Demo................................
HI now used to this
.span4.cell {
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
}
Live demo
Try this css code. It set height as auto.
remove if you don't want border.
.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}
Try this demo: jsfiddle