I have the following HTML
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.no-padding {
padding: 0 !important;
}
.home-slider img {
margin-right: 6px;
float: left;
width: 35px;
position: relative;
top: -4px;
}
.home-slider-wrap {
position: relative;
}
.home-slider-wrap .bg-img {
height: 500px;
width: auto;
max-width: none;
}
.img-full {
width: 100%;
}
#media (max-width: 767px) {
.home-slider-wrap .bg-img {
min-height: auto;
min-width: 100%;
width: 100%;
height: auto;
}
}
<div class="wrapper">
<div class="container-fluid no-padding">
<div class="home-slider-wrap">
<div class="home-slider">
<div>
<img src="https://g5-assets-cld-res.cloudinary.com/image/upload/q_auto,f_auto,fl_lossy/g5/g5-c-1t2d31r8-berkshire-communities/g5-cl-i2pbvvuq-creekstone/uploads/pet-friendly.jpg" class="bg-img img-full ing-responsive" alt="">
</div>
</div>
</div>
</div>
</div>
I am trying to resize this image but at the same time also keep a minimum height for devices less than 768px; However as you can see in the demo below, this ain't working out.
The portion of the cat and dog isn't visible when the page is resized for a mobile device.
Demo
How do I fix this? Any help is appreciated.
You could try using a media query
Maybe you can try this css:
background-size: cover;
background-position: center;
background-repeat: no-repeat;
You can use media query to target below 768px width devices to define style like below -
#media (max-width:767px){
.home-slider-wrap .bg-img {
min-height: auto;
min-width: 100%;
width: 100%;
height: auto;
}
}
Related
I am having issues with responsiveness in CSS. my pictures are not shrinking with increase or decrease in browser window. below is my div for the images
<div class="images">
<img src="imagefolder/coding2.jpg" alt="codepic" >
<img src="imagefolder/coding.jpg" alt="codepic">
</div>
also below is my style sheet class for images
#media screen and (max-width:1000px){
.images {
background-color: darkgrey;
padding: 10%;
width: 100%;
float: left;
margin-top: 30px;
margin-bottom: 30px;
object-fit: cover;
height: auto;
background-size: contain;
Make your images fit the parent by givning them a 100% width. Like this
.images img {
width: 100%;
height: auto;
}
#media screen and (max-width:1000px) {
.images {
background-color: darkgrey;
padding: 25px;
width: calc(100% - 50px);
}
.images img {
width: 100%;
height: auto;
}
}
<div class="images">
<img src="https://www.inma.org/files/images/blogs/feature_photos/Oct16_Ideas-Buytaert-1800.jpg" alt="codepic"><img src="https://digitalagencynetwork.com/wp-content/uploads/2020/02/what-you-can-see-from-coca-colas-digital-marketing-strategy.jpg" alt="codepic">
</div>
Give each image a class, <img class="myImage" src="imagefolder/coding.jpg" alt="codepic"> and specify the width for those images: .myImage { width: 100% //for example }
I believe that your problem can be solved by either by putting each <img> tag inside a separate <div> or by doing this:
.imgages {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
I have a container that positioned horizontally in the middle of the body, this container includes a div inside of it, this div has a background,
I want the background of the div to be responsive when shrinking or resizing the window like this site here ask.fm , I have used background-size: cover; but it didn't work with me.
HTML
<div class="container">
<div class="cover"></div>
</div>
CSS
.container {
width: 851px;
margin: 0px auto;
}
.cover {
background-image: url("wall.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
}
/* Media Queries */
#media screen and (max-width: 840px) {
.cover {
width: 100%;
}
.container {
width: 100%;
}
}
#media screen and (max-width: 600px) {
.container {
padding: 0;
}
}
I usually do a combination of these 2 things - depending on screen size - and I grab different src for the image / background or inline depends...
<section class="container">
<div class="inner-w">
<figure>
<img src="https://placehold.it/1600x900" alt="">
</figure>
</div>
</section>
<section class="container section-name">
<div class="inner-w">
<!-- ... -->
</div>
</section>
https://jsfiddle.net/sheriffderek/4j2avj7v/
figure {
margin: 0;
}
figure img {
display: block;
width: 100%;
height: auto;
}
.container {
background: gray;
border: 1px solid blue;
}
.container .inner-w {
max-width: 400px; /* just for this example... likely 900+ */
margin: 0 auto;
background: red;
}
.section-name .inner-w {
min-height: 300px; /* it needs to have some shape */
background-image: url('http://placehold.it/1600x900');
background-size: cover;
background-position: center center;
}
Is this a bug in firefox?
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
/*border: 4px solid black;*/
}
.container-fluid {
height: 100%;
width: 100%;
display: table;
padding-right: 0;
padding-left: 0;
/*border: 4px solid blue;*/
}
.row-fluid {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
background-color:#990000;
/*border: 4px solid red;*/
}
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-width:100%;
max-height:100%;
margin-left: auto;
margin-right: auto;
}
HTML,
<div class="container-fluid">
<div class="row-fluid">
<div class="img-container">
<!-- <img src="http://placehold.it/400x450"> -->
<img src="http://placehold.it/2000x450">
<!-- <img src="http://placehold.it/400x480"> -->
</div>
</div>
</div>
Chrome,
The large image will be scaled down to fit the screen width which is what I want.
Firefox,
The image is not scaled down to fit the screen.
Any ideas how I can fix this?
EDIT:
#-moz-document url-prefix() {
.img-container img {
width: 100%;
max-width: -moz-max-content;
}
}
Since you are using CSS table for the layout already, I'm suggesting this approach without flexbox. It works nicely on Chrome and Firefox according to my tests. I added a div around the img.
jsFiddle
body { margin:0; }
.img-container {
display: table;
table-layout: fixed; /*required for responsive width in Firefox*/
width: 100%; /*required for fixed table layout*/
}
.img-container .image {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100vh; /*required for responsive height*/
}
.img-container .image img {
max-width: 100%;
max-height: 100%;
vertical-align: middle; /*remove whitespace*/
}
<div class="img-container">
<div class="image">
<img src="http://placehold.it/400x300">
<!-- <img src="http://placehold.it/2000x450"> -->
<!-- <img src="http://placehold.it/400x480"> -->
</div>
</div>
Alternatively, you can use pseudo element :before or :after + inline block for vertical alignment. No markup change is required.
jsFiddle
body { margin:0; }
.img-container {
width: 100vw; /*required for responsive width in Firefox*/
height: 100vh;
text-align: center;
font-size: 0; /*remove whitespace*/
}
.img-container:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.img-container img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<div class="img-container">
<img src="http://placehold.it/400x300">
<!-- <img src="http://placehold.it/2000x450"> -->
<!-- <img src="http://placehold.it/400x480"> -->
</div>
Yes there is problem in firefox. It will not maintaining aspect ratio. To make it working just add width: 100%; to image will solve issue.
.img-container img {
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
width: 100%;
}
Working Fiddle
Check same type of issue here.
Edit:
To solve issue for all size image use max-width: -moz-max-content;
#-moz-document url-prefix() {
.img-container img { width: 100%; max-width: -moz-max-content; }
}
Updated Fiddle
Based on a bug report (see below), this is a known issue with Firefox. (Although IE11 also fails to scale the image as desired).
This seems to solve the problem in Firefox:
Instead of:
.img-container img {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
Try this:
.img-container img {
width: 100%; /* adjusted */
height: auto; /* adjusted */
margin-left: auto;
margin-right: auto;
}
DEMO
Another possible solution involves adding table-layout: fixed to the main container (.container-fluid). This method is detailed in this bug report:
Bug 975632 - max-width: 100%; doesn't work inside tables or display: table
In iE and Chrome my container block is well vertically centered but not in Firefox. I don't understand because all the parent are well defined so it would be ok under every browser. Maybe there is a special toolkit under Mozilla for that kind of CSS but i didn't find it .
index.html.twig
{% block body %}
<div class="container">
<div class="vertical-center-row">
<div align="center">
<div class="col-md-6 col-md-offset-3">
<div class="col-xs-6">
<img src={{ asset('images/icones/buy_button.png') }} alt="buy_button" id="buy_button"class="img-rounded img-responsive">
</div>
<div class="col-xs-6">
<img src={{ asset('images/icones/sell_button.png') }} alt="sell_button" id="sell_button" class="img-rounded img-responsive">
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Applied CSS :
html,body{
height: 100%;
}
body {
margin: 0;
background: url('../../../../images/pictures/home_background.jpg');
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
padding-top: 6%;
overflow: hidden;
}
/*general*/
#toHide{
display: none;
}
/*center*/
.container{
min-height: 100%;
height: auto;
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
/* footer*/
#general-navbar{
height: 6%;
}
#wrap{
height: 94%;
}
#footer {
background-color: #f5f5f5;
height: 6%;
}
#footer-container{
background-color: #f5f5f5;
height: 100%;
width:100%;
}
#clean-footer{
clear:both;
}
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
height: 100%;
max-height: 100%;
margin-right: -100000px;
padding-right: 100000px;
}
/* responsive design*/
#media only screen and (max-width: 600px) {
body {
/* The file size of this background image is 93% smaller
to improve page load speed on mobile internet connections */
background: url('../../../../images/pictures/home_background.jpg');
padding-top: 6%;
}
.hide-scroll {
overflow-x: auto;
overflow-y: hidden;
}
.viewport {
margin-right: -600px;
padding-right: 600px;
}
body {
overflow: visible;
}
}
So, my question is how to make it work under Mozilla Firefox?
Thanks in advance
Horizontal centering:
For the object you need to center just use the following:
display: block;
margin-left: auto;
margin-right: auto;
It is absolutely cross-browser.
Edit:
Try to change container class styles like this:
.container{
height: 100%;
display: table;
vertical-align: middle;
background: green;
}
You need to make the blocks you want aligned vertically inline or inline-block. vertical-align: middle; does not work on block elements.
I have a list of screenshots. I want to display those inside a desktop-frame. I can achieve the effect easily with CSS but trying to make it responsive is giving me headaches.
My Html structure and style:
<style>
.container {
width: 80%;
margin: 0 auto;
}
.frame {
list-style-type: none;
background-image: url('http://www.hobbysubmarines.com/TV.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.frame li {
width: 100%;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
}
</style>
HTML:
<div class="container">
<ul class="frame">
<li><img class="screenshot" src="../img/screenshot1.jpg"></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/faj2rfc8/1/ so you maybe get the idea. If you see the fiddle, it is just to put the cat inside the tv-frame. Making this responsive is my main issue.
I would size the background in 100%, and add a media query to reduce the height of the screenshots for smaller screens. I put a fiddle together for you:
.container {
width: 80%;
margin: 0 auto;
}
.frame {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg');
background-size: 100%;
background-position: center;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
height: 100px;
}
// mobile only
#media screen and (max-width: 479px) {
.screenshot {
height: 40px;
}
}
fiddle: http://jsfiddle.net/gg89qwon/1/