I have tried using media query to resize images on my page according to screen-size but it didn't work , need help.
Here is the relevant code of images in my html :
<body>
<div class="img certhtml"></div>
<div class="img certcss"></div>
<div class="img certjs"></div>
<div class="img certphp"></div>
</body>
</html>
Here is the relevant css pertaining to the class:
.img {
width: 836px;
height: 588px;
border: 4px solid #38b6ff;
margin: 5px;
background-size: cover;
background-repeat: no-repeat ;
margin: auto;
}
.certhtml {
background-image: url("images/SW_html5_foundations.png");
}
.certcss {
background-image: url("images/SW_css3_foundations.png");
}
.certjs {
background-image: url("images/SW_javascript_foundations.png");
}
.certphp {
background-image: url("images/SW_php_7_foundations.png");
}
This code allows the images to be seen clearly on full screen ,when screen width goes down below 776px then it buggers up the images.
I tried using
#media and (max width:776px) {
.img{height:60%;width:60%}
}
Tried lots of fiddling about but didn't work
but to no avail, would appreciate help, thanks.
If you have an image inside the div, for example
<div class="img certcss"><img src="https://example.com/sample.jpg" alt="you own alt"></div>
Then you should apply the correct CSS selector to the IMG, and also you need to correct the media selector
#media only screen and (max-width: 776px) {
.img img {
height:60%;
width:60%;
}
}
You could also do width 100% and add-in
.img img {
object-fit: cover;
}
Which will ensure the full responsiveness of the image.
Related
I need my background image to be responsive. I have used background-size: contain and that seems to work fine but I need the height of my div to be responsive as well.
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
background-size: contain;
height: 600px;
}
<div class="container">
<div class="bg"></div>
</div>
For now the height is 600px and based on the width of the screen, you will see a red background, which should not be the case.
I have tried background: cover, but it will scale the image. It should be 100% of the div but it should not be cut.
How can I fix this?
https://jsfiddle.net/mt386Ln0/
There is an easy solution without using JavaScript. Just add <svg> with specific ratio inside a container.
You must use image dimensions as viewBox <svg viewBox="0 0 960 628"></svg>
Example:
div{
background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
}
svg{
width:100%;
display:block;
visibility:hidden;
}
.demo-1{width:100%}
.demo-2{width:40%}
<div class="demo-1">
<svg viewBox="0 0 960 628"></svg>
</div>
<hr>
<div class="demo-2">
<svg viewBox="0 0 960 628"></svg>
</div>
If you know the ratio of the image you can consider the padding trick:
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}
.bg:before {
content: "";
display: inline-block;
padding-top: calc((628/960) * 100%); /* OR 65.42% */
vertical-align: top;
}
<div class="container">
<div class="bg"></div>
</div>
Instead of using background-size: contain, I used background-size: auto, which seems to work the way you want it to. Furthermore, I added some javascript to help with the resizing.
window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
background-size: auto;
height: 600px;
}
<div class="container" id = "a">
<div class="bg" id = "b"></div>
</div>
Have you tried:
background-size: cover
this will allow the background to always cover the DIV - you might need to tweek the -
background-position: xxxxx
as sometimes the screen size your viewing the image on will mean setting a #meda query to get it right for each different deceive (i.e. mobile or desktop)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I have this image in css and I want to add bootstrap class: img-responsive to it so it becomes responsive. It's easy if it's in HTML but how to do it in CSS?
#index-jumbotron {
height: 490px;
margin-left: 0;
margin-right: 0;
background-image: url("../images/Eiffel%20Sunset%203.JPG");
Thanks!
Here's how you can do responsive background images in CSS :
body {
margin: 0;
}
#index-jumbotron {
background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
background-size: cover;
padding-bottom: 46.128%; /* <- This value should be equal to height / width */
}
<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>
(see also this Fiddle)
This works both with and without Bootstrap.
Try:
background-size:cover;
Or
background-size:contain;
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
First, please consider this fiddle.
I need to get some links over specific image regions, however those images are scaled according to the parent size...
that's why the link's position and size are relative(percentages) to the image.
But the fiddle shows the problem of this approach.
Is there anyway to get the .image-wrapper to "mimic" the img size and position after scaled?! Any trick or whatever?
Note: I'm OK with webkit-only solutions!
Edit 1
Actually I'm more focused in making the image fit on the content div, then making the image wrapper follow the resulting image size. Here's what I achieved so far...
Now I'm trying to get it working with the image centralized.
Here is the CSS skeleton for a solution.
Suppose your HTML looks like the following:
<div id="content1" class="content portrait">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/200/250" />
</div>
</div>
</div>
<div id="content2" class="content landscape">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/300/200" />
</div>
</div>
</div>
The HTML is similar to your original code except that there is an extra wrapper .panel-wrapper.
I used the following CSS:
.content {
background: lightgray;
display: table;
margin: 40px 0;
}
#content1 {
width:100px;
height:150px;
}
#content2 {
width:150px;
height:150px;
}
.panel-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.image-wrapper {
outline: 1px solid green;
position:relative;
display: inline-block;
}
.content img {
display: block;
width: 100%;
}
.portrait .image-wrapper {
height: calc(100% - 2px);
}
.portrait .img {
height: 100%;
}
.landscape .image-wrapper {
width: calc(100% - 2px);
}
.landscape .img {
width: 100%;
}
.sample-link {
background:rgba(0, 0, 255, 0.3);
position:absolute;
display:block;
width: 50%;
height:20%;
top:5%;
left:5%;
}
I apply display: table to .content and display: table-cell to .panel-wrapper so that I can get a get the image centered both vertically and horizontally.
The .image-wrapper has display: inline-block.
To get the scaling right, you need to consider two cases depending on the aspect ratio of the image.
For portrait images, apply height: 100% to the .image-wrapper and the child img.
For landscape images, apply width: 100% respectively.
If you have a border on .image-wrapper, use the CSS calc() function to adjust for the 2px width of the borders.
What you need to do is use JavaScript/jQuery to determine the aspect ratio of the image and then apply the correct class (.portrait or .landscape) to the .content block.
See demo at: http://jsfiddle.net/audetwebdesign/SZjvJ/
A possible way is to work with image ratio and to adjust link ratio and margins according to image dimensions, with Jquery.
Have a look at this example fiddle: http://jsfiddle.net/t7Ucj/
The Js measures width and height of the image and according to its ratio, it works on the width or on the height of the link.
var width = $('#content2 img').width();
var height = $('#content2 img').height();
//vertical image
if(height > width){
var left = $('#content2 img').css('margin-left');
$('#content2 .sample-link').css({'width': width, 'left' : left});
}
else{
var top = $('#content2 img').css('margin-top');
$('#content2 .sample-link').css({'height': height*0.2, 'top' : top + height*0.4});
}
Then you can wrap all the instructions in a simple function obviously.
I know it can be tricky to put all the possible cases but i had a similar problem and solved in this way.
hope it helps
Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.
the maximum width of the div is 1200px
the minimum width of the div is 900px
When someone resizes their browser I need that div to expand or contract depending on the viewport size.
Any thoughts on how I can do this [is this possible without javascript?]?
UPDATE
This is where I got to - seems to work well in most browsers until I hit IE7..
<div id="viewport" class="[[*layout]]">
<div id="contentwrapper">
<div class="wrapper logo">
<div id="header">
[[$TopNav]]
</div>
<div id="content" class="homepage">
[[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
</div>
</div>
</div>
<div class="wrapper footer">
<div id="footer">
<div id="footnav">[[$FootNav]]</div>
<div id="copyright">[[$Copyright]]</div>
<div id="news-feed">[[$NewsFeed]]</div>
</div>
</div>
div {border: 1px dotted #ccc;}
div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}
div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}
div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}
div#header {}
.wrapper {
margin:0 auto;
height:150px;
width:100%;
max-width:1110px;
min-width:1060px;
text-align:left;
}
.wrapper.logo {
background:transparent
url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
}
div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}
CSS has 2 properties for those scenarios, that work from IE7+ called:
min-width: https://developer.mozilla.org/en/CSS/min-width
max-width: https://developer.mozilla.org/en/CSS/max-width
That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.
For a no-js solution on modern browser you can use CSS media queries like so
#media screen and (max-width: 1199px) {
div { width: 900px; }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
}
this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries
a simple proof-of-concept demo
<html>
<head>
<style>
div { margin: 0 auto; border: 1px red solid }
div:after { display: block; }
#media screen and (max-width: 1199px) {
div { width: 900px; }
div:after { content: " max-width is 1199px" }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
div:after { content: " min-width is 1200px" }
}
</style>
</head>
<body>
<div>Resize your browser</div>
</body>
</html>