I'm trying to create an simple div that will contain images which can have different sizes and scales.
The image should not be stretched or cropped and must be centered vertically and horizontally.
Currently I'm stuck with this: JSFiddle
.circleImage {
height: 100px; /* equals max image height */
width: 100px;
white-space: nowrap;
text-align: center;
line-height: 100px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
overflow: hidden;
border: solid 1px grey;
}
.circleImage img{
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
There are those tiny spaces at the top of the second and third image. Any ideas how I can get rid of them?
http://jsfiddle.net/k7fpz8be/
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/350x150" alt"logo" title="landscape" />
</div>
<br />
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/350x350" alt"logo" title="square" />
</div>
<br />
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/150x350" alt"logo" title="portrait" />
</div>
.circleImage {
height: 100px; /* equals max image height */
width: 100px;
border: 1px solid grey;
white-space: nowrap;
border-radius:50px;
text-align: center;
overflow:hidden;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circleImage img {
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
This should works
Set the image as div background as below,
<div class="circleImage" style="background: url('https://placehold.it/350x350'); background-size: cover;">
Now the image is perfectly fit within the div.
Increase the width and height on .circleImage img to 105%.
http://jsfiddle.net/qLfxb3nh/2/
Related
So I'm questioning myself why the div with the class champ_info isn't placed next to the image because the image is an inline-block element. So the Text in my div element lies under the image instead of next to the image. My code is below.
.champ_info {
background: #0b2e33;
color: white;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
Thank you in advance.
I personally find making inherently block level elements inline counter intuitive. Flex box is the perfect solution to your problem.
.champ_container {
width: 40%;
margin: 0 auto;
display: flex;
/* justify-content: center; */
align-items: center;
background: #10474e;
}
.champ_info {
background: #0b2e33;
color: white;
width: 100%;
height: 100%;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
<div> is a block element, which means it takes up the whole line. Put display: inline; inside the css for the <div> and it places it next to the image like you wanted.
Add vertical-align: top; if you want the text to align to the top. Since the image and the text align to the bottom of the parent, you need to manually set them to align to the top.
.champ_info {
background: #0b2e33;
color: white;
display: inline;
vertical-align: top;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
I'm trying to get the red border that contains the text to stretch to the bottom of the parent div. Height 100% won't do it. It essentially needs to be the same height as the image.
Note: when viewing the demo, it might be worth shrinking your browser window.
How can I get this to size properly when the 3:2 image is setting the height?
Many thanks for any help!
.the-window {
width: 100%;
height: auto;
display: block;
float: left;
}
.the-image img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.the-image {
float: left;
background-size: cover !important;
width: 45%;
background-position: center center !important;
display: block;
background: pink;
box-sizing: border-box;
border: 1px solid #ccc;
border-right: none;
}
.the-details {
display: block;
float: left;
width: 55%;
height: 80px;
box-sizing: border-box;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.the-header {
padding: 0;
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-image" style="background:url('#')">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
</div>
</a>
<div class="the-details">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>
You can do it with the Flexbox:
/* commented out the unnecessary styles */
* {box-sizing:border-box} /* use * {box-sizing:border-box;margin:0;padding:0} to keep the same height of both all the way up when resized vertically */
html, body {margin:0}
.the-window {
/*width: 100%;*/
/*height: auto;*/
/*float: left;*/
display: flex; /* displays flex-items (children) inline, where flex-items have the same height by default, which is dictated by the height of the "tallest" one / can also use the display: inline-flex if you only want it to take the contents width */
}
.the-image img {
display: block;
max-width: 100%; /* modified */
max-height: 100vh; /* vertically responsive */
margin: 0;
}
.the-image {
/*float: left;*/
background-size: cover !important;
/*width: 45%;*/
background-position: center center !important;
/*display: block;*/
background: pink;
border: 1px solid #ccc;
border-right: none;
}
.the-details {
/*flex: 1; uncomment if you want it to take the remaining horizontal space*/
/*display: block;*/
/*float: left;*/
/*width: 55%;*/
/*height: 80px;*/
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.the-header {
padding: 0;
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-image" style="background:url('#')">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
</div>
</a>
<div class="the-details">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>
One way is to use flexbox, as already shown in another answer. Another way is to put the image inside the "details" container (which has 100% width, or any desired width), float the image to the left and add height: auto and overflow: auto to its container to make it wrap the complete height of the image.
I erased the unnecessary CSS in the following snippet and added a margin-right to the image to create some distance to the text:
.the-details {
width: 100%;
height: auto;
box-sizing: border-box;
border: 1px solid red;
overflow: auto;
}
.the-details img {
float: left;
margin-right: 20px;
}
.the-header {
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-details">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>
try to remove the height from .the-details then add display:flex; align-items:stretch; to the style of .the-window and give .the-image width:100%
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
My website has an image on the left which scales based upon browser size. To the right is some text.
The problem I have is the div on the right will drop to underneath the image on the left when the browser is made smaller, and only when the image is now the only item on the screen will it start to shrink
https://jsfiddle.net/0gyhrve2/
What I'm trying to achieve is that when you change the width of the page, the 2 divs will remain side by side, but the image on the left will shrink instead of the text dropping underneath.
My effort
<div class="outer">
<div class="img">Words</div>
<div class="other">More words</div>
</div>
CSS
.img {
float: left;
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.other{}
Is this what are you after: https://jsfiddle.net/0gyhrve2/3/ ?
CSS:
.img {
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.imgContainer {
float: left;
width: 75%;
}
.other {
float: left;
width: 25%;
}
HTML:
<div class="outer">
<div class="imgContainer"><div class="img">Words</div></div>
<div class="other">More words</div>
</div>
Well. I would just add these lines of code:
CSS
.img,
.other { display: inline-block; }
.outer { white-space: nowrap; }
Example at jsfiddle
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/