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;
}
}
Related
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 have a DIV on a page that has a fixed width and height (600x400). However, when the viewport becomes smaller than either the DIV's width or the DIV's height, I want the DIV to resize to remain fully visible while keeping its aspect ratio the same. Additionally, I want all the elements within the DIV to resize in the same way (also maintaining the aspect ratio).
While searching for pure CSS solutions I came across the viewport units (vw, vh, vmin, vmax). I also came across max-width and max-height. The code below shows how I combined these two. However, its a solution for resizing the DIV itself, but not the contents of the DIV.
<html>
<head>
<style type="text/css">
#mainDiv{
width: 800px;
height: 800px;
max-width: 90vmin;
max-height: 90vmin;
background-color: yellow;
position: relative;
}
#redSquare{
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
background-color: red;
z-index: 5;
}
#greenSquare{
position: absolute;
top: 120px;
left: 120px;
width: 300px;
height: 300px;
background-color: green;
z-index: 10;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="greenSquare">green</div>
<div id="redSquare">red</div>
</div>
</body>
</html>
Is there a pure CSS solution that allows me to:
Specify the width and height of the DIV without limitations (in pixels, percentages, and whatever other way)
Specify the width and height of the elements within the div in pixels.
Resize the DIV and its contents when the viewport becomes smaller than the DIV's width or height.
There must be decent browser support for the solution
You could use the css3 media query see: W3Schools media query examples, also see MDN web guide on media queries.
Some code examples:
#media only screen and (max-width: 500px) {
body {
background-color: yellow;
}
}
/* Or */
#media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
body {
background-color: blue;
}
}
You can change any element by specifying their element/id/class/attribute name and properties you specified will change when the width of the screen is at that targeted value.
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
I'm using max-width: 100% on an img within a div, to have the image scale automatically as the browser window is adjusted.
Is there any way I can make the image 'over-scale / enlarge' over its initial size, with the same scale, if the div's width is larger than the img width?
Thanks
Actually, you don't need max-width: 100%;. Just use width: 100%; instead. Example:
img {
width: 100%;
}
<img src="http://placekitten.com/500/500?image=9" />
The above kitten image will always scale up or down to be 100% as wide as its parent.
You can get a sort of conditional logic with media queries. In this example below, we have a headline and a 500px wide image. The image has max-width: 100%;. And there's a media query which says that when the viewport is more than 500px wide, the image's width should be 100% the width of its parent (and make the body background grey to identify when this media query applies).
HTML:
<h1>Pellentesque habitant morbi</h1>
<img src="http://placekitten.com/500/500?image=10" />
CSS:
img {
max-width: 100%;
}
#media (min-width: 500px) {
body {
background-color: #AAA;
}
img {
width: 100%;
}
}
Thus, when inside a wide viewport, the image is as wide as that viewport.
Alternately, try making the image a background image, and then use CSS's background-size: cover;:
#image {
background: #D84E51 url(http://placekitten.com/800/800?image=10) no-repeat center center;
background-size: cover;
min-height: 400px;
}
I'm currently making a CSS layout and I have divs side by side in the main content. When the page is resized one drops below the other. When this happens I want the top div to take up the width of the parent div
#MainWrapper #Content {
float: left;
background-color:#E4E4E4;
width:100%;
max-width:1180px;
clear:left;
font-family: Bebas;
}
#Welcometext {
max-width: 500px;
min-width: 100%;
background-color:#399;
display:inline-block;
}
#Slideshow {
width: 100px;
background-color:#C96;
min-width: 200px;
display:inline-block;
}
From your last comment, I think you want to look into # media queries.
You can tell it to change specific properties when the width of the window drops below your specified width.
#media (max-width: 600px) {
#Welcometext{
Properties specific to to a screen size under 600px;
}
}
CSS Media Queries