I have a div with a text on the left part of it:
* {padding: 0%;margin: 0%;}
body {background-color: brown;}
.content_box {
height: 100%;
display: flex;
flex-direction: row;
background-color: brown;
padding: 1em;
border-radius: 0.5rem;
}
.content_box div {
display: flex;
flex-direction: column;
overflow: hidden;
margin-right: 1rem;
}
.content_box img {
object-fit: cover;
width: 30%;
/*height: 100%;
width: auto;
max-width: 100%;*/
}
.content_box .credentials {color: beige;}
.content_box .left {margin-left: auto;}
.content_box .right {margin-right: 100px;}
<div class='content_box'>
<div class='left'>
<div class='credentials'>Username</div>
<p>Posted message</p>
<div class='credentials'>01/01/2021</div>
</div>
<div class='right'>
...
</div>
</div>
I want to add an image on the right part of it. But it has to be set to the size of text(so if we have three lines of text image will be bigger than if we had one line of text, even if the image with 3 lines is 30x30 pixels, and 1 line text is 1024x1024 pixels)
I would love it if someone could edit my question because I'm not too good at English...
You could position the .content_box relative and the .right div absolute. So you can give it the height of it's parent. Finally give the image a max-height of 100%:
.content_box {
position: relative;
height: auto;
}
.right {
position: absolute;
height: 100%;
width: auto;
top: 0;
right: 0;
background-color: red;
}
.right img {
max-height: 100%;
width: auto;
}
Related
I have been searching for how to create the aspect ratio of divs using the CSS stylesheet; I could successfully create a demo. The aspect ratio works fine but I can not find a way to set the height of my container if its width and height ratio is bigger (#1 scenario).
I managed to successfully create the #2 scenario. But when I try to create #1 scenario, the container's height expands, here is my code:
HTML, body {
margin:0;
padding:0;
height:100%;
}
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}
#container:hover {
width: 500px; /* Only increasing the width */
height: 300px;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
if you hover over it, only the container's width will be increased, not the height
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
The height of the container should not change, but it is
</body>
</html>
Note: I've only added padding to the divs so it would be easier to visualize where they currently are. Also, ignore my poorly made demo, I am a beginner in HTML and in CSS and I might have missed something very obvious.
Edit: I have made a hover action on css so you can see the aspect ratio working
The problem is with your two inner elements' padding-bottom. Because of the box model, when you apply a percentage-based padding to an element, it calculates based off of the parents (bubbling) width, ignoring the **height.
To resolve this, simply set a fixed padding-bottom:
HTML,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: khaki;
padding: 10px;
width: 350px; /* Increased for demo */
height: 150px; /* To fit within snippet */
display: table;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75px;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75px;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to have the child actually exceed the parent container, then you'll want to use negative margin.
I am trying to create this layout:
LINK
I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?
You can do it in two ways 1)using bootstrap classes 2)using #media and for showing proper image according to div size you can use .className{background-size:contain;background-repeat:no-repeat}
You may use flex, transform and pseudo to hold backgrounds:
/* http://codepen.io/gc-nomade/pen/vGvRPZ */
html,
body {
height: 100%;
width:100%;
margin: 0;
overflow: hidden;
}
body > div {
position:relative;
min-height: 100%;
width:100%;
display: flex;
width: 160%;
margin: 0;
margin-left: -30%;
}
div div {
display: flex;
align-items: center;
transform: skew(-30deg);
overflow: hidden;
border-left: solid;
flex: 4;
position: relative;
}
div div h2 {
font-size: 5vw;
color: turquoise;
text-shadow: 0 0 1px black;
position: relative;
text-align: center;
width: 100%;
transform: skew(30deg);
}
div div:nth-child(1) h2 {
padding-left: 50%;
}
div div:nth-child(3) h2 {
padding-right: 50%;
}
div div:before {
transform: skew(30deg);
content: '';
top: 0;
bottom: 0;
right: -50%;
left: -50%;
position: absolute;
background: url(http://hd.wallpaperswide.com/thumbs/grungy_background-t2.jpg ) center tomato;
background-size: 100vw auto;
}
div div:nth-child(2):before {
background: url(http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg) center right gray;
background-size: 100vw auto;
}
div div:nth-child(3):before {
background: url(https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg) center right turquoise;
background-size: 100vw auto;
}
div div:nth-child(2) {
flex: 2.5;
}
<div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
</div>
I'm trying to make a div the same width as the containing image with height:100% and width:auto.
With display:inline-block it seems to work but only if you don't resize the browser. The div slide always keep the initial width. How can I change this behavior?
This is my code:
CSS:
html{
width: 100%;
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.gallery{
height: 80%;
width: 100%;
}
.slide{
background-color: #000;
height: 100%;
width: auto;
display: inline-block;
margin: 0;
padding: 0;
}
img{
width: auto;
height: 100%;
float: left;
opacity: 0.5;
}
HTML:
<body>
<div class="gallery">
<div class="slide">
<img src="http://lorempixel.com/300/200/nature/1">
</div>
</div>
</body>
or here:
https://jsfiddle.net/ykzokoxd/
Fix:
.element{
-webkit-animation: ibfix infinite 1s;
}
#-webkit-keyframes ibfix {
from {max-width:100%;padding:0;}
to {max-width:99.9%;padding:0.01%}
}
Edit: "Repainting/refreshing inline-block element, so width is adapting to child img"
https://jsfiddle.net/ykzokoxd/2/
I have a parent div, and inside there are multiple divs that I want centered vertically.
<div id="main">
<div id="picBox">
<img src="imageurl">
</div>
<div id="lines">
Line 1<br> Line2
</div>
<div id="other">
Right side text
</div>
</div>
The CSS I have set to
#main {
border: 1px solid #FF0000;
height: 100px;
width: 500px;
vertical-align: middle;
display: table-cell;
}
#picBox {
height: 90px;
width: 75px;
background-color: #000;
float: left;
position: relative;
margin-right: 3px;
display: inline-block;
}
#picBox img {
position: relative;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
display: inline-block;
}
#lines {
font-size: 20px;
float: left;
background-color: #999;
display: inline-block;
}
#other {
float: right;
margin-right: 3px;
background-color: #6666DD;
display: inline-block;
}
I can't seem to get the divs within the main div to center vertically, with the exception of the first 'picBox' div.
Is there a way to vertically center the other divs as well?
Here's my jfiddle example:
http://jsfiddle.net/3ffda7ua/2/
Do something like:
#main {
... //Keep your other rules
position: relative;
}
#main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And handle your other positioning with left: whatever.
JSFiddle example
why don't you use flex-box to align it, using a class like this one on the parent:
.flex-center-center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo