I use a class for my portrait and landscape images. All my landscape images have the same size of 1400x1000px (700x500px 5K retina proof). And i want the portrait images always to be 700px in height and width set to auto, but it doesn't seem to work that way. Why?
.size-m { /* project image portrait */
max-height: 700px;
width: auto;
}
.size-xl { /* project image landscape */
max-width: 700px;
height: auto;
}
I might be misunderstanding, but this appears to be working fine in these jsfiddles:
landscape
img {
max-width: 700px;
height: auto;
}
portrait
img {
max-height: 700px;
width: auto;
}
Add display: block to your classes. That should do the trick.
Related
I am trying to set the aspect ratio of a div to portrait (9:16) like this..
.ratio {
position: relative;
height: 0;
width: 100%;
background: teal;
padding-bottom: 177.77%;
}
<div class="ratio">
16:9
</div>
This is working as expected, but I am now wanting to make it so that it has a maximum height of 100% of the viewport.
I am trying to make sure it fits exactly onto the screen whilst keeping the aspect ratio and not introducing scrollbars.
What's my best approach?
You will need to use the ratio of 16/9 = 1.778 to calculate the width using calc() css function
body {
margin: 0;
}
.ratio {
position: relative;
height: 100vh;
background: teal;
width: calc(1.778 * 100vh);
margin: auto;
}
<div class="ratio">
16:9
</div>
I would recommend then using the vh unit for the height then.
height: 100vh;
I have a simple question: How do I make an image properly respond to the viewport?
I have a 400 pixel (400px) wide and tall image, and I'd like it to become only 90% of the viewport width (90vw) when the browser is resized, so here is my current code:
img {
width: 400px;
height: 400px;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
But the problem is that the image doesn't adjust at all with this current code.
When I put max-width in place of width only the width of the image adjusts while the height does not leaving me with an elliptical and distorted image.
Is there an easy fix to my problem?
Setting both height and width in CSS for an <img> is prone to distorting it. If you don't want that to happen, you should just specify one dimension and set the other to auto. Considering your image is, in fact, 400px × 400px, here's what you should use:
#myImg {
width: 400px;
height: auto;
}
#media (max-width: 440px) {
#myImg {
width: 90vw;
}
}
/* optional, for centering */
#myImg {
display: block;
margin: 0 auto;
}
<img src="http://via.placeholder.com/400x400" id="myImg">
Play with it here. Note I used 440px so there wouldn't be a jump from 400px to 360px when crossing over the 400px device width limit. You can, of course, use 400px if that's what you want.
Try object fit.
img {
width: 400px;
height: 400px;
object-fit: cover;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
Or for better browser compatibility you can also use a background image instead.
For that you'd need to set two #media queries, one for horizontal, and one for vertical adjustment, both set to 400px. With the horizontal one, you only use the width, and with the vertical one, only the height:
body {margin: 0}
img {
display: block; /* removes bottom margin/whitespace */
}
#media (max-width: 400px) {
img {width: 90%}
}
#media (max-height: 400px) {
img {height: 90vh}
}
<img src="http://placehold.it/400x400" alt="">
I am building a responsive website ( http://dev.searsdavies.co.uk/quadrant-new/ )
With a layout that requires a set of buttons to sit in the dead centre of the screen for portrait tablets, this layout is triggered at a screen width of 768px and stays in place down to 414px. The buttons are position:absolute on top of all the other content as they need to snap to the bottom on the larger and smaller versions of the site.
The boxes behave perfectly in Chrome and Firefox but safari positions them too high up the page.
Full site is above, here is the relevant CSS
.row.footer {
bottom: 49%;
transform: translate(0, 50%);
position: absolute;
padding: 0 50px;
}
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
There is also a conditional query that stops the layout becoming too shallow on landscape phones and similar devices:
#media screen and (max-height: 800px) and (max-width:768px) and (min-width:415px) {
.row.footer {
top:352px ;
bottom:auto ;
transform:none
}
}
.side-img {
height: 50vh;
min-height: 400px;
background-size: cover;
position: relative;
}
.main-content {
height: 50vh;
min-height: 400px;
}
A few things here.
Firstly, prefix your properties; you are using transform but you are not prefixing; they will not work in Safari.
webkit-transform: translate(x,x);
Secondly, you have this in your #media query - max-height: 800px. That means do this stuff when the browser is **less than** 800px in height - demo.
Is that really what you want to say for a #media rule targeting a portrait tablet (an iPad for example, has is 768 widthby 1024 height)?
To fix your issues:
1) prefix your transforms
2) fix your #media rules
3) remove the bottom: auto rule
4) remove/adjust the bottom: 49% rule
I am using Bootstrap to create a website that uses the carousel component which takes up a large portion of the page. I am finding that when I resize the browser window and drag the viewport horizontally that the image width becomes skewed and distorted. I have set the following overall CSS styles for my carousel along with media queries for different widths.
Are there any amendments to my CSS rules or properties I can apply to .carousel .item and .carousel img to prevent the width of the image being distorted when the browser window is dragged horizontally? I was thinking width:100%; my possibly resolve this issue?
Here is an image of the skewing occuring when resizing the browser horizontally:
Here is the website: http://www.the-session.co.uk/jen/
Here is the CSS:
.carousel .item {
height: 900px;
}
.carousel img {
min-width: 100%;
height: 900px;
}
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
}
The problem lies in the fact that you are defining a specific height and/or width (depending on your layout) which is causing the issue. If your design allows for it, change the "height:900px" from .carousel img to "height:auto" in both your #media files so that your image is not being distorted.
If however the desired outcome is to actually have the carousel image expand to fill the whole viewport another solution will be necessary, likely requiring to change the images to background images to fill an absolutely positioned div.
The problem with trying to scale images that way is that you are not preserving the initial aspect ratio of the image.
Instead, try background-size: contain. This instructs the browser to scale the image, proportionately, such that the image will fill the container along the longer axis.
You are setting the wrong values for height in the media queries . Since your img height in main css is set to height:900px; You need to do the following :
#media (max-width: 979px) {
.carousel .item {
height: 750px;
}
.carousel img {
width: auto;
height: 75 0px;
}
}
#media (max-width: 767px) {
.carousel .item {
height: 600px;
}
.carousel img {
height: 600px;
}
}
I'm building a responsive grid using the max-width of 980px to convert my fixed PX widths to % but I'm unsure what I have to do to update the heights also set in PX to %. Can anyone advise on how this can be achieved? I've tried to set height to max-height:300px; height:100% but with no success.
Js Fiddle http://jsfiddle.net/5jJQk/
Example CSS
#ctn{
max-width: 980px; /* 960 */
width:100%;
margin: 0 auto;
clear: left;
background: #eee;
padding: 10px;
}
.col{
background: #b7b7b7;
max-height: 300px;
height: 100%;
margin: 1.041666667%; /* 10/960 */
float: left;
}
.four{
width: 31.25%; /* 300/960 */
}
.eight{
width: 64.583333333%; /* 620/960 */
}
.twelve{
width: 97.916666667%; /* 940/960 */
clear: left;
}
height in percentage only works if the parent element has defined height, or it's in percentages all the way up to the root element.
See what happens when you add
html, body, #ctn { height:100%; }
to your CSS.
However, defining height is only necessary in very specific cases. Usually you want blocks to accommodate to their content.
I would look into media queries, they work really well when converting.
http://mediaqueri.es/
http://css-tricks.com/css-media-queries/
http://www.w3.org/TR/css3-mediaqueries/
I hope this helps.