I have the following requirements:
I need a div with an image + text inside.
The div should keep its aspect ratio and all images inside of the divs should have the same height (to do this, I use: Maintain the aspect ratio of a div with CSS).
The image inside of the div should be stretched in order to completely fill the parent div.
I prepared a jsfiddle
I have two main issues:
As you can see, the left div is higher, because it has text inside. This collides with the padding-bottom: 150%-approach which is used to preserve the aspect ratio of the divs when their size is changed. The goal, however, is that all divs have the same size no matter if/how much text they have inside.
Moreover, I would like to change the opacity of the background image when I hover the div. However, the text-opacity should not change. I think this can only be achieved via JS. How?
Add text as position:absolute
.inner-text{
position:absolute;
width:100%;
height:100%;
text-align:center;
z-index:1;
}
.event:hover .inner-text{
background:rgba(255,255,255,0.5)
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
Update fiddle code: https://jsfiddle.net/f5uxz4mx/8/
.bit-3 {
width: 33.33333%;
float: left;
margin-left: 20px;
}
.event {
margin: 0 auto;
position: relative;
border: 2px solid #000000;
padding-bottom: 150%;
background-size: cover;
}
.inner-text{
position:absolute;
width:100%;
height:100%;
text-align:center;
z-index:1;
}
.event:hover .inner-text{
background:rgba(255,255,255,0.5)
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
try adding background-size: contain;height: 0;
.bit-3 {
width: 33.33333%;
float: left;
max-resolution: res;-left: 20px;
}
.event {
margin: 0 auto;
position: relative;
border: 2px solid #000000;
padding-bottom: 150%;
background-size: cover;
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg);background-size: contain;height: 0;">asdf text
</div>
</div>
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
</div>
</div>
Related
I'm making a website that has a series of offset cards, one with image and one with text and I want to alternate the offset for each line. The only issue is I can't quite figure out how to (while keeping both in the wrapper) make the image smaller than the wrapper in height so that the text card can be at the top and overlap the top and side, like this:
Sorry for the image layout, it was supposed to be landscape. Anyway, the way I have it now, the parent and child are both at the top of the wrapper. I want it so that the text (child) is at the top and the image is slightly shorter so that I get the overlap/overlay effect from the text box on the top as well as the right. I also need to make sure, for responsiveness, that they stay inside the wraper. How should I fix that?
#wrapper{
background-color:green;
}
#parent{
width: 500px;
height:400px;
border: 4px solid blue;
background-size:cover;
}
#child{
width:300px;
height:200px;
border: 3px solid red;
position:relative;
top:0%;
left:80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
I'm not sure this is exactly what you're going for, but if you add padding to the top of the wrapper, you can offset the child element.
#wrapper {
background-color: green;
padding-top: 50px;
}
#parent {
width: 500px;
height: 400px;
border: 4px solid blue;
background-size: cover;
}
#child {
width: 300px;
height: 200px;
border: 3px solid red;
position: relative;
top: -50px;
left: 80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
Here's the fiddle:
https://jsfiddle.net/16f8mj39/
I have added z-index to position the text-box in front of image box.Check my code.
#container{ width:100%;position:relative; }
#wrapper{ width:100%;border:1px solid black;position:relative;overflow:auto;height:400px; }
#text_box{ position:absolute;border:1px solid red;width:50%;height:250px;top:10px;right:10px;z-index:1;background-color:red; }
#image_box{ position:absolute;border:1px solid blue; width:70%;height:300px;bottom:10px;left:10px;z-index:0;background-color:blue; }
<div id="container">
<div id="wrapper">
<p>Wrapper</p>
<div id="text_box">
<p>Text Box</p>
</div>
<div id="image_box">
<p>Image Box</p>
</div>
</div>
</div>
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
I want to have a column with 4 divs with a background-image and fit the 100% of the parent width and give the same to the height to make a square. This is what i have without %:
My HTML:
<div class="col-sm-3 slots" style="background-color: red;">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
And my CSS with width and height in pixels.
.slot {
background-image: url("img/Inventory_slot_background.png");
background-repeat: no-repeat;
width: 68px;
height: 68px;
}
.slots {
padding: 0;
}
I want to give width: 100%; and then something like height: width;
Edit: The problem is that if i use the padding-bottom: 100%; if i want to put text or images, the backgrund expands and look like this:
You may use a pseudo element:
.slot {
box-shadow:inset 0 0 5px #C9A170;
background:#EBE6C9;
border:solid #78624A;
overflow:hidden;
padding:5px;
margin:1em;
}
.slot:before {
content:'';
float:left;
padding:50% 0;
}
body {
margin:0;
}
<div class="col-sm-3 slots" style="background-color: red;">
<div class="slot"> anything here</div>
<div class="slot"> can grow taller than the initial square shape</div>
<div class="slot"></div>
<div class="slot"></div>
</div>
I don't understand what you're trying to accomplish... if you want those boxes to dynamically change size according to their parent div you need javascript for that, can't do with CSS.
You can use a vertical padding with a percentage for this:
.slots {
width: 150px;
}
.slot {
width: 100%;
padding-bottom: 100%;
}
http://jsfiddle.net/26dhhune/
So, I've been trying to create a horizontal scrolling page on my website. I set the entire scroll portion to 400%, as I have four pages. However, I was wondering is it possible(using CSS, jQuery, etc.) to cut up that 400% so that I can use 0-100% for the first page, 100%-200% for the second page, etc.? Or is there another way around this (I've been trying to accomplish this for cross-browser/screen size compatibility). I've only managed to do this so far using hard pixels, but is there a way to change that into percentages?
HTML:
<div id="transition-slide-container">
<div id="transition-slide">
<div id="inner-container>
<div class="slide" id="home">
<h1>home</h1>
</div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<p>about</p>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<p>contact<p>
</div>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
height: 900px;
min-width: 400%;
z-index: -1;
float: left;
position: relative;
}
div#transition-slide {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 1620px;
margin: 0 auto;
}
div#inner-container {
width: 1024px;
margin: 0 auto;
padding: 0;
}
Website: andrewgu12.kodingen.com
you can set your .slide width to 100% and give background-color: #bee1ff; to your body.
demo
and where is your #inner-container in html?
translition slide should have width of 400% and each slide 100%. The container would be width 100%, overflow:hidden if you want to do this with javascript/anchors or overflow-x:scroll;
you could give 100% width to your .slide class
.slide {
display: inline-block;
width: 100%;
margin: 0 auto;
}