I'm trying to practice HTML & CSS by recreating templates and I'm having a lot of trouble with the height of the image inside the thumbnail.
You can see here: https://codepen.io/broccoliman/full/rpEePL/
.desttwo{
margin-bottom: 30px;
}
.dest-card{
width: 320px;
/* height: auto; */
margin-bottom: 90px;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.30);
}
.dest-card__image{
max-width: 100%;
/* height: auto; */
}
.destinations{
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-card{
max-width: 1100px;
display:flex;
justify-content: space-around;
flex-wrap: wrap;
padding-left: 20px;
padding-right: 20px;
}
#media only screen and (max-width: 800px){
.flex-card{
flex-direction: column;
align-items: center;
}
.dest-card{
width: 100%;
}
.dest-card__image{
width: 100%;
}
}
#media only screen and (min-width: 801px) and (max-width: 1099px){
.flex-card{
flex-flow: row wrap;
justify-content: space-around;
}
.dest-card{
width: 45%;
}
.dest-card__image{
width: 100%;
}
}
The main problem is that in the first section the photos maintain the aspect ratio and still look crisp as I resize the browser window, but they're not all the same height.
In the second section I use inline styling with width and height so that they keep the same height but the pictures get distorted as I stretch the browser.
I tried wrapping the images in a div and doing overflow:hidden, but no luck.
How do I go about this?
Follow up questions about image dimensions
All of the photos that I used contain different image dimensions. Am I supposed to crop these images before using them to all have the same dimensions?
Also I read on internetingishard.com that inline styling an image width or height for content purposes is one of the rare cases where you'd use inline styling, but am I using it wrong in this case? Should it match the actual dimensions of the image and not match the dimensions that I want that element to be?
try below for your image section
.dest-card {height: 250px;}
.dest-card img{
height: 100%;
width: 100%;
object-fit: cover;
-o-object-fit: cover;
}
Related
When the page is displayed on PC or tablet width it works perfectly. When on phone the body leaves empty space on the right. It isn't margin, or padding. I have tried width: 100% and width: 100vw.
Although the #media part doesn't help too much. I'm using flexbox to position everything, the viewport is activated and I have tried using position absolute / fixed on the body, but nothing works.
#media (max-width: 576px) {
body {
width: 100%;
}
main {
width: 100%;
}
header {
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
}
nav {
margin-right: 0px;
}
a {
margin: 0.5rem;
}
}
I am working on building a website using react and I've come into a problem centering element on left on right vertically, that has been bothering me for a few days now I haven't been able to fix it.
I have a div that contains 2 elements, 1 on the left and one on the right.
.whatbdh_content-bottom {
background: #eee;
display: flex;
flex-direction: row;
padding: 2rem;
}
.whatbdh_content_left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 2rem;
margin-right: 2rem;
}
.whatbdh_content-grid {
max-width: 1140px;
margin: auto;
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(2, 1fr);
}
.card {
text-align: center;
padding: 1rem;
border: 1px solid #000;
color: #000;
}
.whatbdh_content_right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin: 5rem;
}
.whatbdh_content_right svg,
img {
max-width: 100%;
height: auto;
max-height: 100%;
}
#media screen and (max-width: 640px) {
.whatbdh_section {
flex-direction: column;
margin: 0 0 3rem;
}
}
#media screen and (max-width: 980px) {
.whatbdh_content-grid {
max-width: 90%;
margin: auto;
grid-template-columns: 1fr;
}
}
<div className='whatbdh_content-bottom'>
<div className='whatbdh_content_left'>
<h1 className='title_text'>Not the best title right now</h1>
<div className='whatbdh_content-grid'>
<div className='card'>
<p>We will show up</p>
</div>
<div className='card'>
<p>We will show up <br />okay</p>
</div>
<div className='card'>
<p>We will show up <br />okay</p>
</div>
<div className='card'>
<p>We will never show up, <br /> okay </p>
</div>
</div>
</div>
<div className='whatbdh_content_right'>
<img src={arrow2}/>
</div>
</div>
Basically I would like my left and right content to be horizontally aligned and also I am not sure why when I use small screen my image does not show up anymore.
Thanks in advance
Two parts in the CSS code are causing this issue:
This part:
.whatbdh_content_right{
flex:1;
display: flex;
justify-content: center;
align-items: center;
margin: 5rem; <<== HERE
}
And this part:
.whatbdh_content_right svg, img{
max-width: 100%; <<== HERE
height: auto;
max-height: 100%;
#media screen and (max-width: 640px) {
.whatbdh_section{
flex-direction: column;
margin: 0 0 3rem;
}
}
#media screen and (max-width: 980px) {
.whatbdh_content-grid {
max-width: 90%;
margin: auto;
grid-template-columns: 1fr;
}
}
}
The first one defines the margin of the image to be 5rem horizontally (and vertically), this means that its full width (100%) will be constrained by the width of the grid to its left.
The second section places another constraint on the image; such that it will not be able to expand its width above 100% of its assigned width.
Meaning that, as the screen width gets smaller, the grid will take a larger portion of the screen, leaving a small room for the image (given the constant margins), which makes the image disappear since it is not allowed to expand its size above the 100% limit (caused by the second part).
To solve this, you can either: reduce the margins of the .whatbdh_content_right (the first CSS part), reduce the size taken up by the grid and the text on the left, or allow the image to resize beyond the 100% limit (by removing that from the second CSS part).
I have different image sizes in a div in a bootstrap carousel. It is either landscape or portrait images and if I set the width to be 100% the landscape images become perfect but the portraits to high.
And if I set max-hight to it the lanscape images doesn't become full width.
Link to Wep-page
CSS:
.case-box {
margin-bottom: 1.5em;
display: flex;
width: 100%;
height: 420px;
align-items: center;
justify-content: start;
}
#media (min-width: 768px)
.case-box {
height: 428px;
}
#media (min-width: 1280px)
.case-box {
height: 540px;
}
.case-img {
width: auto;
max-height: 100%;
}
Why don't you use Bootstrap 4 class .img-fluid for making images responsive (.img-responsive for Bootstrap 3)?
Set your images with css:
max-width: 100%;
max-height: 100%;
It should adapt them correctly no matter the height of width.
Solved it by creating images within a white frame, so they all have the same width and height.. Simple but not the best.
My footer icons are smushed vertically on ios. Once i rotate the phone they're fine, I've checked the aspect ratio and such on my browser dev tools and it works fine...just not on ios in vertical view. Again, they look fine when I rotate the phone, just not in vertical.
Any idea why this would be? I'm assuming it is in one of my media queries, I'll include a couple that could possibly be of concern.
I would seriously appreciate your help if you have some to offer!
I've tried using the XCode dev tools to spot the issue, didn't solve anything.
// Parent to imgLink
const SocialDiv = styled.div`
height: 100%;
width: 300px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
align-self: flex-end;
#media only screen and (max-width: 660px) {
width: 250px;
}
#media only screen and (max-width:497px) {
width:100%;
}
`
// Child to Social Div
const imgLink = styled.a`
height: 100%
width: 25%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
margin-bottom: 0;
align-self: center;
#media only screen and (max-width: 525px) {
width: 15%;
margin: -3%;
margin-top: 0;
margin-bottom: 0;
}
#media only screen and (max-width:497px) {
width: 25%;
justify-content: center;
margin: 0;
}
`
// Child to imgLink
const Img = styled.img`
height: 100%;
width: auto;
`
The expected outcome is a 1x1 aspect ratio, right now i'm getting about 2:1 horizontally.
Found it, I had height: 100% where I definitely should have had a fixed amount. Fixed my issue!
For anyone reading this in the future, just make sure you have a media query specifically for the phone size.
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.