I'm having a problem resizing the image in the yellow div. I can't set max-width to 100% because it disappear and also can't set a fixed width to the divs because I need it be dynamic.
How could I resize the image without setting width?
.container{
margin: 0px auto 0px auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
display: table;
}
.opcion{
display: table-cell;
background: yellow;
}
.opcion img{ }
.texto{
width: 100%;
display: table-cell;
background: green;
}
<div class="container">
<div class="opcion">
<img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="texto ti-ab-d">
<label for="test"><p>Prueba</p></label>
</div>
</div>
You can do this with Flexbox
.container{
margin: 0px auto 0px auto;
width: 100%;
height: 100%;
border-spacing: 0px;
display: flex;
}
.opcion{
background: yellow;
flex: 0 1 auto;
}
.opcion img {
width: 100%;
}
.texto{
background: green;
flex: 1;
}
<div class="container">
<div class="opcion">
<img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="texto ti-ab-d">
<label for="test"><p>Prueba</p></label>
</div>
</div>
Try this :) This would stretch image I believe to fit
.opcion.image {
background-image: url("file.png");
height:100%;
width:100%;
}
try to delete this
margin: 0px auto 0px auto;
Related
A white background can be seen at the bottom of the div, can this be fixed?
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic_1 {
height: 300px;
width: 300px;
inline-size: 100%;
object-fit: cover;
}
<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div> <a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://cf.ltkcdn.net/horoscopes/images/orig/239601-1600x1030-aries-
constellation.jpg " id="Aries_pic_1">
</a>
</div>
</div>
</html>
As you set up your styles, adding display:block on your img will resolve the issue. Like so :
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic_1 {
height: 300px;
width: 300px;
inline-size: 100%;
object-fit: cover;
display: block; /* line I added */
}
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div>
<a href="Aries_page.html" class="Get_1" target="_blank">
<img
src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
id="Aries_pic_1"
/>
</a>
</div>
</div>
</div>
I would use flex for this.
Seeing as you have appled min-width and min-height on flexbox-item-1, I suspect you want responsive sizing on the image - using fixed values for this will not let you do that.
display: flex on the container element will automatically make the second container div take up the remaining space, as well as the a-element. Applying max-width: 100% makes sure the img never overflows out of the container. Apply height: 100% and object-fit: cover and voila, you got a fully responsive container with an img-element inside.
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
display: flex;
}
#Aries_pic_1 {
max-width: 100%;
height: 100%;
object-fit: cover;
}
<html>
<div class="flexbox-container">
<div class="flexbox-item_one flexbox-item-1">
<div>
<a href="Aries_page.html" class="Get_1" target="_blank">
<img src="https://www.fillmurray.com/640/360" id="Aries_pic_1">
</a>
</div>
</div>
</html>
The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
Im trying to create a 2 page column, but my divs don't stretch to the width I specify and I don't get why. I have linked the jsfiddle for my code.
code here:
.container{
width: 960px;
background-color: grey;
margin: 0px auto 0px auto;
}
.column1{
background-color: red;
display: inline;
width: 480px;
}
.column2{
width: 480px;
background-color: yellow;
display: inline;
}
<body>
<div class="container">
<div class="column1">a</div>
<div class="column2">b</div>
</div>
</body>
I'm assuming you're trying to create 2 <div> elements that are placed on the left and right side of the page? If so, this should solve your problem:
.container{
width: 960px;
background-color: grey;
margin: 0px auto 0px auto;
}
.column1{
width: 50%;
background-color: red;
float: left;
}
.column2{
width: 50%;
background-color: yellow;
float: left;
}
<body>
<div class="container">
<div class="column1">a</div>
<div class="column2">b</div>
</div>
</body>
I need to place the content one below the other from the top and center align it.
I tried making all the rows positioning them absolute and making the
top:20% ,top:40% ,top:60% respectively and margin: 0 auto does not work.So I had to put left percentages for all three rows.
It looks rubbish when I reduce width of browser and when I reduce the height of the browser the divs overlap each other
I do not want overflow:auto or overflow-y:scroll .I want the content to be placed in that 100% height of wrapper and centered perfectly.How to implement this and also suggest me how to do it in media queries ?
HTML
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
CSS
html,body{
height: 100%;
width: 100%;
}
#wrapper{
height: 100%;
width: 100%;
}
#row1{
height: 200px;
width: 600px;
}
#row2{
height: 400px;
width: 800px;
}
#row3{
height: 200px;
width: 500px;
}
Please do like this
html,body{
height: 100%;
width: 100%;
}
body{background: #333;}
#wrapper{
height: 100%;
width: 100%;
display: table;
}
.w1{
display: table-cell;
vertical-align: middle;
}
#row1{
height: 50px;
width: 600px;
background: #fff;
margin: 0 auto;
}
#row2{
height: 100px;
width: 800px;
background: #fff;
margin: 10px auto;
}
#row3{
height: 50px;
width: 500px;
background: #fff;
margin: 0 auto;
}
<div id="wrapper">
<div class="w1">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
</div>
It looks rubbish when I reduce width of browser and when I reduce the
height of the browser the divs overlap each other
Use percent units (or vw) instead of pixels.
I want the content to be placed in that 100% height of wrapper and
centered perfectly
Use flex on the container, with appropriate width and heights on the children.
Example Snippet:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper {
height: 100%; width: 100%;
display: flex; flex-direction: column;
align-items: center; text-align: center;
justify-content: space-around; /* to distribute space evenly around */
}
#wrapper > div { background-color: #ddd; }
#row1 { flex: 0 0 20%; width: 50%; } /* 0 0 means cannot grow cannot shrink */
#row2 { flex: 0 0 10%; width: 80%; }
#row3 { flex: 0 0 40%; width: 65%; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample Fiddle: http://jsfiddle.net/j3js87fc/1/
Update:
Alternatively, you could just use appropriate top/bottom margins on the row2 to have differing gaps between rows.
Example 2:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper { height: 100%; width: 100%; }
#wrapper > div { background-color: #ddd; }
#row1 { height: 20%; width: 50%; margin: auto; }
#row2 { height: 10%; width: 80%; margin: 3% auto 7% auto; }
#row3 { height: 40%; width: 65%; margin: auto; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample fiddle: http://jsfiddle.net/j3js87fc/4/
.
Here you go:
http://jsfiddle.net/oh36f1zb/4/
The left:50%; transform: translateX(-50%); does all the trick.