I have a div with a fixed height, and inside it there is an image. This image is larger than the width and height of the containing div. I want to make the width of the image to match the width of the div, and then make the height of the image automatically generated.
HTML:
<template>
<div class="portfolio">
<div class="header">
Portfolio
</div>
<div class="projects">
<div class="project">
<img src="../assets/projects/charlotte_folke.jpg" />
</div>
</div>
<div class="overview">
</div>
</div>
</template>
SCSS:
.portfolio {
width: 100%;
height: 100%;
}
.header {
height: 10%;
display: flex;
font-size: 24px;
color: #B59762;
align-items: center;
justify-content: center;
}
.projects {
height: 80%;
display: flex;
overflow: auto;
flex-direction: column;
}
.project {
width: 100%;
height: 35%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
The problem with this solution, is that the image element still takes up space below the containing div. I want to cut off the image completely, so it only takes up the available space specified by the containing div.
How can i achieve this?
Related
I want to put three images next together by using flexbox and responsive units in this case percentage(%). I have 2 issues: (1) justify-content does not work because I use % for flex items. (2) The tall of my images are getting bigger than the wide, in other word width and height of my images are not relative together because I used auto keyword for the height of images so I can have width and height relative. I would be very grateful if you could help me. I will include my code below.
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
}
.service-item {
width: 90%;
height: 65%;
overflow: hidden;
}
.service-item img {
width: 100%;
height: auto;
display: block;
}
<section class="services">
<h2>our services</h2>
<div id="services-container">
<div class="service-item hotel">
<img src="./resources/pictures/hotel.jpg" alt="hotel">
<h4>The best hotels</h4>
</div>
<div class="service-item air-plane">
<img src="./resources/pictures/airplane.jpg" alt="airplane">
<h4>The best airline services</h4>
</div>
<div class="service-item food">
<img src="./resources/pictures/food.jpg" alt="food">
<h4>The highest quality foods</h4>
</div>
</div>
</section>
First, you can set the height to 100% and width to auto and use justify-content on parent like so :
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.service-item {
width: 30%;
height: 100%;
overflow: hidden;
}
.service-item img {
width: auto;
height: 100%;
display: block;
}
Hope it helps
I want to have a container that includes an image and a caption.
The container should always be the same size, the caption height might change.
In my mind the caption should get the auto height, depending on it’s size and the rest of the containers height will be allocated to the image.
I tried doing that with a div and i worked flawlessly. When I exchange the placeholder div with an actual image tag, the image will take the 100% height of the container, not of its allocated flex space in the container.
Why is that and how can I fix it?
Example showing the difference between div and image tag:
https://codepen.io/lkssmnt-the-lessful/pen/QWqbxNK?editors=1100
.project {
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
}
.project img {
height: 100%;
width: 100%;
object-fit: cover;
}
Add overflow: hidden to the .img tag. - This has the negative effect of snipping the bottom of the image off, however.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project {
height: 500px;
width: 500px;
border: 5px solid red;
margin: 1rem;
display: flex;
flex-direction: column;
}
.project p {
padding: 1rem;
}
.project img {
overflow: hidden;
height: 100%;
width: 100%;
object-fit: cover;
}
.project .test {
height: 100%;
width: 100%;
background: beige;
}
<div class="wrapper">
<div class="project">
<div class="test"></div>
<p>Project 1</p>
</div>
<div class="project">
<img src="https://images.unsplash.com/photo-1518676590629-3dcbd9c5a5c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80">
<p>Project 2</p>
</div>
</div>
I'm trying to create a vertical line inside a flexbox container div, and am finding that unless I give either the line or the container a specific height (like 100px instead of a percentage), the line won't show. Examination with devtools shows that the line has 0 height, even though the container has a non-zero height. I'm guessing that maybe the rendering engine somehow doesn't know about the container's height at the time it's rendering the line? I'd like to find a way to make this work with percentages in order to make the container and line responsive.
jsfiddle: [https://jsfiddle.net/jjorsett/d0852yhx/25/][1] Set .line's height units to px and it will show up.
css and html:
<div class="container">
<img class="image" src="http://via.placeholder.com/100x250"/>
<div class="line">
</div>
</div>
.container {
background: yellow;
display: flex;
height: auto;
justify-content: space-around;
align-items: center;
}
.line {
border-left: .25em solid #f60;
height: 50%;
}
.image {
object-fit: contain;
width: 25%;
}
[1]: https://jsfiddle.net/jjorsett/d0852yhx/25/
Just remove align-items: center; from your container and height: 50% from your child and see the magic.
.container {
background: yellow;
display: flex;
height: auto;
justify-content: space-around;
}
.line {
border-left: .25em solid #f60;
}
.image {
object-fit: contain;
width: 25%;
}
<div class="container">
<img class="image" src="http://via.placeholder.com/100x250"/>
<div class="line">
</div>
</div>
When you align your item in the center it will automatically shrink your child container according to the children of your child div.
For the benefit of anyone else coming across this, I got the behavior I wanted by using javascript as follows (fiddle here: https://jsfiddle.net/jjorsett/d0852yhx/62/)
<div class="container">
<img class="image" src="http://via.placeholder.com/100x250"/>
<div id="line">
</div>
</div>
.container {
background: yellow;
display: flex;
height: auto;
justify-content: space-around;
align-items: center;
}
#line {
border-left: .25em solid #f60;
height: 50%;
}
.image {
object-fit: contain;
width: 25%;
}
window.onresize = adjustLineSize;
window.onload = adjustLineSize;
function adjustLineSize() {
var line = document.getElementById("line");
var desiredLineHeight = line.parentElement.clientHeight/2;
line.style.height= desiredLineHeight + "px";
}
I am trying to achieve the effect below in the example, so that the two images not in the middle are cut off purposely, so that when the browser is smaller, the user will actually see the full images. I have tried endless variations on this css:
width: 100%;
height: auto;
max-width: 670px;
overflow: hidden;
position: absolute;
and seem to be getting nowhere
Just use display: flex; for the container and align all the images in the middle.
.wrapper {
display: flex;
justify-content: center;
}
You can see and test this example here: https://codepen.io/bIropka/pen/WNramag
So I've used flexbox to get them all on the same line.
Added overflow: hidden; to .image-wrapper so the image can overflow without getting a scrollbar.
on the first .image-wrapper I've added direction: rtl; so it goes out of the box on the left instead of the right side.
.container .image-wrapper:nth-of-type(2n) {
min-width: max-content;
}
This is to make sure the middle wrapper will always be the full image size
.container {
display: flex;
}
.container .image-wrapper {
padding: 5px;
overflow: hidden;
min-height: max-content;
position: relative;
}
.container .image-wrapper:first-of-type {
direction: rtl;
}
.container .image-wrapper:nth-of-type(2n) {
min-width: max-content;
}
<div class="container">
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
</div>
I am testing this problem in the latest version of Safari for Windows 7.
The problem is that this code works in all other browsers BUT safari:
<style type="text/css">
.userImg { height: 100%; width: 100%; }
.imgContainer { height: auto; width: 150px; }
</style>
<div class="imgContainer">
<img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
</div>
Does anyone know of a trick to get this to size the image proportionally in Safari using just CSS?
Thanks!
For those who needs to use height auto and parent of image is set to display: flex, this trick will help.
image { align-self: flex-start; }
If your parent of image has set flex-direction: column, you need to do this instead.
image { justify-self: flex-start; }
Just set only the width on the image. The browser will scale the image proportionally automatically.
.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }
For those who needs to use height auto you an also try with this :
.userImg{
object-fit: contain;
}
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }
2019 year.
check maybe the parent element
.imgContainer { display: flex; align-items: stretch}
Try this:
Parent has display:flex
Child has align-self:center
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Slabo 27px", serif;
}
h2 {
text-align: center;
}
[data-flex] {
display: flex;
width: 80%;
max-width: 800px;
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.5;
}
[data-flex] > img {
margin-right: 2rem;
width: 30%;
}
[data-center] {
align-items: center;
}
[data-flex] div, [data-flex] p {
flex: 1;
}
[data-flex] div {
margin-right: 2rem;
}
[data-flex] div img {
width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
<img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
<img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
<img src="sophie.jpg" alt style="align-self: center">
</div>
<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
<img src="sophie.jpg" alt>
</div>
<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>
<div data-flex data-center>
<div>
<img src="sophie.jpg" alt>
</div>
</div>