I'm trying to scale two images to fit a mobile screen with both keeping their original proportions without overflow. When I've tried to apply max-width it only kicks in when one image falls below screen width.
.one img {
position: absolute;
width: 200px;
height: 200px;
}
.two img {
position: absolute;
margin-left: 200px;
width: 300px;
height: 200px;
}
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
Try:
* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
}
.slider .slide img {
width: 100%;
}
<div class="slider">
<div class="slide">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png" style="max-width: 200px;">
</div>
<div class="slide">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"
style="max-width: 300px;">
</div>
</div>
Check this:
.container {
display: flex;
}
.one img {
width: 100%;
max-width: 200px;
}
.two img {
width: 100%;
max-width: 300px;
}
<div class="container">
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
</div>
.one, .two {
width:50%; float:left
}
.one img, .two img {
width: 100%;
}
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
Can you please check this and let me know, if this is the same you are looking for.
Related
How can I remove the empty space from the image container (blue)?
I need it to be compatible with ie11.
I don't want to hardcode the width/height of the container because images can be different aspect ratios and sizes.
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
display: flex;
max-height: 5em;
border: 1px solid red;
}
.video .image {
background: blue;
max-height: 100%;
max-width: 100%;
}
.video .image img {
max-width: 20vw;
max-height: 100%;
}
<main>
<div class="video">
<div class="image">
<img src="https://placehold.it/300/200">
</div>
<div class="content">
<p>title</p>
<p>description</p>
</div>
</div>
</main>
I find a strange thing: If we download the image and load it from the same server as the test page like this <img src="picture/200.png">, the following CSS code works well in IE:
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
display: flex;
height: 5em;
border: 1px solid red;
}
.video .image {
height: 100%;
}
.video .image img {
height: 100%;
}
I serve the image and the test page through localhost, you can see the result:
If you still want to use the online link as image source, you can try the following code without flexbox which can work well in IE:
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
height: 5em;
border: 1px solid red;
}
.video img {
overflow: hidden;
height: 100%;
float: left;
}
<main>
<div class="video">
<img src="https://placehold.it/300/200">
<div class="content">
<p>title</p>
<p>description</p>
</div>
</div>
</main>
Here is my demo to show what I mean:
* {
box-sizing: border-box;
}
body, html {
height: 100%;
width: 100%;
}
body {
background: #333;
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 100%;
padding: 20px;
}
.panel {
flex: 0 0 200px;
display: flex;
margin-left: 20px;
}
.widget {
background: white;
width: 100%;
height: 100%;
}
.videoContainer {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
}
.video {
height: 50%;
width: 50%;
padding: 2px;
position: relative;
}
.videoCover {
position: absolute;
background: red;
opacity: 0.4;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: contain; /* Default for videos */
}
<div class="content">
<div class="videoContainer">
<div class="video">
<div class="videoCover"></div>
<img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
</div>
<div class="video">
<img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
</div>
<div class="video">
<img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
</div>
<div class="video">
<img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
</div>
</div>
<div class="panel">
<div class="widget"></div>
</div>
</div>
Resizing the browser vertically or horizontally, the problem can be seen clearly. So basically I would like to place the red cover exactly onto the images. So I assume I need a div, which is exactly the same size as the image.
It seems object fit does its job well, but because of this, I cannot place over the red div.
Is it can be done pure css? How should I modify the dom and the css?
Thank you very much!
Clarifying what I would like to achive is:
The best I can come up with is this, where I wrapped all in a cover and then used a pseudo for the red cover.
I also added a few media queries, as one need to control the width of the video's, so they don't become wider than their ratio height, and if, one make them less wide.
You might need to elaborate with these settings, maybe one or two more queries will be needed, but I think one can do this pretty good, and be able to avoid the need of script.
And by cutting out object-fit, you also get a better cross browser solution.
As a side note, here is an answer I participated in, which shows what it takes to achieve what you want: Scale element proportional to Background Cover/Contain. It has a script and a CSS version
* {
box-sizing: border-box;
}
body, html {
height: 100%;
width: 100%;
}
body {
background: #333;
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 100%;
padding: 20px;
}
.panel {
flex: 0 0 200px;
display: flex;
margin-left: 20px;
}
.widget {
background: white;
width: 100%;
height: 100%;
}
.videoContainer {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
align-items: center;
}
.video {
height: 50%;
width: 50%;
padding: 2px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.videoCover {
position: relative;
overflow: hidden;
}
.video:nth-child(1) .videoCover::after {
content: '';
position: absolute;
background: red;
opacity: 0.4;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
display: block;
width: 100%;
height: auto;
}
#media (min-aspect-ratio: 600/400) {
.video:nth-child(1) .videoCover::after {
width: 80%;
}
img {
width: 80%;
}
}
#media (min-aspect-ratio: 800/400) {
.video:nth-child(1) .videoCover::after {
width: 60%;
}
img {
width: 60%;
}
}
#media (min-aspect-ratio: 1000/400) {
.video:nth-child(1) .videoCover::after {
width: 40%;
}
img {
width: 40%;
}
}
<div class="content">
<div class="videoContainer">
<div class="video">
<div class="videoCover">
<img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
</div>
</div>
<div class="video">
<div class="videoCover">
<img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
</div>
</div>
<div class="video">
<div class="videoCover">
<img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
</div>
</div>
<div class="video">
<div class="videoCover">
<img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
</div>
</div>
</div>
<div class="panel">
<div class="widget"></div>
</div>
</div>
I can't manage to get the image to fit 100% to the height of a css made table. As you see below, the table and image is totally ignoring the parent element's dimensions.
Everything needs to be dynamically that's why I work with percent.
.img {
max-width: 50%;
height: 100px; // <-- This should be able to be dynamic ( anything )
}
.img .table {
display: table;
width: 100%;
height: 100%;
}
.img .row {
display: table-row;
}
.img .cell {
display: table-cell;
}
.img .row.img-el,
.img .row.img-el .cell {
height: 100%;
}
.img img {
max-width: auto;
height: 100%;
}
<div class="img pull-left gap-right bigger">
<div class="table">
<div class="row img-el">
<div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="height:100%;float:left" /></div>
</div>
<div class="row">
<div class="cell img-text">Hello</div>
</div>
</div>
</div>
Expected result:
Update: Is it possible to fix it with flex in any way?
Is this what you need?
.img {
max-width: 50%;
max-height: 100%;
}
.img .table {
display: table;
width: 100%;
height: 100%;
}
.img .row {
display: table-row;
}
.img .cell {
display: table-cell;
}
.img .row.img-el,
.img .row.img-el .cell {
height: 100%;
}
.img img {
max-width: auto;
height: 100%;
}
.cell img {
width: 100%;
height: auto;
}
<div class="img pull-left gap-right bigger">
<div class="table">
<div class="row img-el">
<div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="float:left" /></div>
</div>
<div class="row">
<div class="cell img-text">Hello</div>
</div>
</div>
</div>
you have to give it a specific height like 200px it cant take a height of 100% of nothing. If you had a box with the height of 200px; you can make the image height be 100% which is 200px
I am trying to create three separate rounded images on the same line. I managed to get two in the correct position but I can't get the last one to move up into the correct line.
.wrap {
width: 100%;
}
.image-left {
content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: 250px;
float: left;
padding-left: 10%;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
height: 250px;
margin-left: auto;
margin-right: auto;
}
.image-right {
content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: 250px;
float: right;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/
<div class="wrap">
<div class="image-left">
<img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
</div>
<div class="image-centre">
<img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
</div>
<div class="image-right">
<img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
</div>
</div>
.wrap {
width: 100%;
display: table;
}
.wrap img {
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.image-left, .image-centre, .image-right {
display: table-cell;
width: 33%;
}
How about using the image tag and wrapping them around a div like this?
.wrap {
width: 100%;
}
.image-wrapper{
width: 33%;
display: inline-block;
text-align: center;
}
.image-wrapper>img{
height:250px;
}
<div class="wrap">
<div class="image-wrapper">
<img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
</div>
<div class="image-wrapper">
<img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
</div>
<div class="image-wrapper">
<img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
</div>
</div>
Float all three of the divs right, make them width: 33.33% and box-sizing: border-box.
This will make three evenly spaced images floated inline.
If you want them all in a neat row you'll have to add float:left; to all of them and or to the .wrap class but you would have to add display:inline; to each image which I think is the best solution. Problem is if the the viewport isn't wide enough it will push to the next line.
.wrap {
width: 100%;
float: left;
}
.image-left {
content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: auto;
max-width: 25%;
padding-left: 10%;
display:inline;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
max-width: 25%;
height:auto;
display:inline;
}
.image-right {
content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: auto;
max-width: 25%;
display:inline;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
You could assign float: left; for all of your images, and then set correct margins.
What i want is to make this divisions using Bootstrap and AngularJS
What i don't know how to do is to make the divisions, i was thinking to split the container in 3 columns of 4. Also want to know if can i split the container in two columns of 6 and overlap another div to make the SECTOR 3?
This is what i said before, but this doesn't give me what i want.
<div class="container" contenteditable="false">
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
</div>
EDIT 1
Also would like to know how to get this responsiveness when loading the site on a smartphone.
Plunker
HTML:
<div class="container">
<div class="content">
<div class="content-body">
<div class="section1 pull-left">section 1</div>
<div class="section2 pull-right">section 2</div>
<div class="section3">section 3</div>
</div>
</div>
</div>
CSS:
/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }
.container {
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.section1 {
width: 50%;
background: red;
height: 100%;
display:block;
}
.section2 {
width: 50%;
height: 50%;
height: 100%;
display: block;
background: blue;
}
.section3 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
height: 50%;
width: 50%;
background: yellow;
}
For responsive style changes you need to add a media query:
#media (max-width: 768px) {
.section3, .section2, .section1 {
display:block;
position: relative;
}
.section3 {
height: 10%;
width: 100%
}
.section2 {
height:60%;
width: 100%
}
.section1 {
height: 30%;
width: 100%
}
}