How do I make these 3 images fit to its parent div height while maintaining the image's aspect ratio?
<div id="myM">
<div class="ab">
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
</div>
</div>
css:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
}
.ab{
width: 100%;
float: right;
}
.cd{
max-height:33%;
width:auto;
}
Here is a Fiddle
I think the problem is with the float removing the container from the flow. Instead, you can make the container an inline-block and use right-align.
https://jsfiddle.net/9uyww2j0/2/
Without changing your HTML, my new CSS is this:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
text-align: right;
}
.ab {
display: inline-block; /* So text-align affects it */
height: 100%
}
.cd{
display: block; /* So takes full width */
height:33%;
}
Related
I have a container div (that cannot be floated) with two children elements. I want child elements to be on opposite sides - first on left, second on right. On 100% browser width children summary width is less than container, but on greater scales it is not, so container should be greater too. How to set container to grow when it's gloat child grow?
UPD: something like this
I need all elements to stay one line in any scale.
<div id="page">
<div id="container">
<div id="left">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div id="right">
right
</div>
</div>
</div>
<style>
#page {
background-color: grey;
width: 100%;
height: 300px;
}
#container {
/*this styles are needed to other parts*/
position: relative;
clear: both;
/*=====================================*/
background-color:red;
height: 50px;
width: 90%;
margin: 0 5%;
}
#left {
float: left;
background-color: blue;
}
#left div {
width: 50px;
display: inline-block;
}
#right{
float: right;
background-color: green;
display: block;
max-width: 200px;
}
</style>
.container {
display: flex;
justify-content: space-between;
}
It should do that.
Google up FlexBox Introduction for good explaination.
something like this ?
I've used display:flex to let the two divs line up nicely, floats only needed for the inner boxed
https://jsfiddle.net/070rk2e1/1/
Everything is in the title !
How can I do to make my div's width equals to its fixed height using CSS only ?
HTML Code
<div class="container">
<div class="square"></div>
</div>
CSS Code
.square{
height:80%;
}
I know I can do the opposite (fixed width) using
.square{
width : 20%;
padding-top:20%
}
because padding-top is relative the width of the container.
I also know I can do it using simple JQuery but don't want to use javascript.
Thanks,
Use vw unit :
.square {
background: #000;
width: 50vw;
height: 50vw;
}
<div class="square"></div>
You need to use Viewport-percentage lengths vw
.square {
background: #000;
width: 20vw;
height: 20vw;
}
<div class="square"></div>
It seems like you want your div to be inside a .container which can be any size. This is easy if the size of that .container is based on the viewport width. I've created an example, below, which shows a block of square divs 2x2 inside of a .container. The .container can be any size. It is important the height and width of the container be based on viewport width.
.container {
width: 90vw;
height: 90vw;
margin: 0 5vw;
}
.container > div {
width: 48%;
height: 48%;
margin: 1%;
display: inline-block;
}
.square1 {
background: #aaa;
}
.square2 {
background: #bbb;
}
.square3 {
background: #ccc;
}
.square4 {
background: #ddd;
}
<div class="container">
<div class="square1"></div><div class="square2"></div><div class="square3"></div><div class="square4"></div>
</div>
If you don't want to use vw, try this out.
https://jsfiddle.net/zofoeLyL/2/
CSS
.square{
width:20%;
position:relative;
background-color:#005f95;
}
.square:before {
display: block;
padding-top: 100%;
}
HTML
<div class="square">
</div>
That will make the height always equal to whatever width % you decide to use.
I have a .container div that is 600px max in width or else 100%.
Inside this div is a .content div that I want to be 60% of the 100% of the container's width.
More generally I'm trying to make a responsive rectangle div instead of a square.
http://jsfiddle.net/7zE9x/ (The image inside the content should be overflown, and have a y-scroll bar)
That is
My HTML is:
<div class="container">
<div class="content">
<img src="..." />
</div>
</div>
Where my css looks like:
.container {
background: black;
padding: 3%;
position: relative;
width: 100%;
max-width: 600px;
}
.content {
overflow: auto;
height: 60%; /* Set this to 400px, meaning that it won't be responsive */
}
.content img {
display:block;
width: 100%;
}
if I set the height of the .content div to 400px it does what I want but it is not a percentage (so on resize it doesn't change - i.e. when the width of the container is 200px the content div's height should be 120px).
You need to set height for .container too.
If the child does not know height of parent how will it adjust it self based on percentage???
Take a look at Fiddle
body {
padding: 80px;
}
.container {
background: black;
padding: 3%;
position: relative;
width: 100%;
max-width: 600px;
height:500px;/* Set height as per your wish. */
}
.content {
overflow: auto;
height:50%; /* Adjust height accordingly. */
}
.content img {
display:block;
width: 100%;
}
I am using wordpress to dynamically display images. Each image has a fixed width of 186 px and variable height, depending on the proportions of the image. Each image sits in a square box, with 15px padding. By default, the images appear at the top of the box. I am looking for a way to vertically center the image, given its fixed width, but variable height. Here is my code:
HTML:
<div class="logoContainer">
<img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding: 15px;
background: #dddddc;
margin-bottom: 10px;
width: 186px;
height: 186px;
}
.logoContainer img {
max-width: 100%;
height: auto;
}
I could use absolute positioning, but without knowing the exact height of the image, it would be difficult to perfectly center. BUT, we do know the exact dimensions of the container box. Thoughts?
Try this - http://jsfiddle.net/vLbRF/
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px;
line-height: 186px;
}
.logoContainer img {
max-width: 100%;
vertical-align: middle;
}
Using this technique which implements vertical-align will allow you to have dynamic-height containers:
<div class="logoContainer">
<span></span><img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px; }
span {
height: 100%;
vertical-align: middle;
display: inline-block;
.logoContainer img {
vertical-align: middle;
display: inline-block; }
So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left).
What I am trying to do is make the content float be max possible width instead of min possible width (as floating causes).
CSS:
#container {
max-width: 800px;
min-width: 500px;
}
.profile {
float: left;
width: 100px;
}
.info {
float: left:
min-width: 400px;
max-width: 700px;
}
HTML:
<div id="container">
<div class="profile">
IMG
</div>
<div class="info">
INFO
</div>
</div>
It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.
if you are floating any element you have to give its parent element, clear:both, overflow: hidden;.
#container {
width: 800px;
clear: both;
overflow: hidden;
}
.profile {
float: left;
width: 100px;
}
.info {
float: left:
min-width: 400px;
max-width: 700px;
}