.ava-block {
width: 220px;
min-height: 155px;
background: url(../images/no-banner.png) no-repeat;
border-right: 1px solid #e8e8e8;
}
#media (max-width: 992px) {
.ava-block {
width: 100%;
background-size: cover;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">
<div class="ava-block" style="background-image: url(https://www.dean.ngo/wp-content/uploads/2018/12/projectElimu-220x155.png);">
</div>
</div>
</div>
I do cover, but image become with bad quality. How I can do it correctly? I need on tablets and mobile devices do fullscreen image, without quality loss and show full image. Width of image can be only 220px and height 155px.
You can't get the a small image to scale while maintaining image quality unless you make use of scalable image type such as vectors.
To solve the image going out of the ratio you could assign and max value for your inner block to ensure it doesn't exceed the maximum size which you had specified width:220 and height:155 or you can just make the size static. If my interpretation of the question is right, you may try something like the following:
.ava-block {
width: 220px;
height: 155px;
border-right: 1px solid #e8e8e8;
color: black;
}
#media (max-width: 992px) {
.ava-block {
width: 100%;
}
}
HTML
<div class="row">
<div class="col-md-3">
<div class="ava-block">
<img style='height: 100%; width: 100%; object-fit: contain' src='https://www.dean.ngo/wp-content/uploads/2018/12/projectElimu-220x155.png' />
</div>
</div>
</div>
Related
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
HTML:
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resources\images\brejosHouse.jpg">
<div class="jumbospan">
<h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
CSS:
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
#media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
#media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
I guess this might be impossible, but perhaps any expert can help me out with this. I'm trying to get a quite simple reponsive behaviour working:
A two columns layout, logo left, navbar right. Now the navbar should be aligned at the bottom of the second column for bigger screens and floating to the next line directly under the logo on smaller screens.
Bigger screen:
Smaller screen:
I suppose this can be done only with JS so far, but maybe anyone knows a way to get this realized with pure CSS.
HTML:
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>
CSS:
#logo {
background-color: red; height: 100px; width: 150px; color: white;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white;
}
I've set up a jsfiddle with the full code: http://jsfiddle.net/m4s4uqhx/6/
Any help is greatly appreciated.
set the height of col-2 similar to logo and set the navbar to position absolute and bottom 0 . replace your css with this solution
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#col1 {
//border: 1px solid darkred; padding: 0px;
}
#col2 {
//border: 1px solid darkblue; padding: 0px;
}
#logo {
background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}
#media only screen and (max-width : 992px){
#navbar{
position: absolute;
bottom: 0px;
}
#col2{
height: 100px;
}
}
#media only screen and (max-width : 768px){
#navbar{
position: relative;
}
#col2{
height: auto;
}
}
If the sizes of your elements are fixed as in your example, you can do the trick with padding-top, and remove it when the screen is too small (xs: <768px).
#media(min-width: 768px) {
#col2 {
padding-top:70px;
}
}
Demo on JSFiddle
Else, I guess you will have to write some JavaScript :)
If you know the exact height of you logo then you can add a padding top to the #col2 div on bigger screens using media queries
tablets and greater #media(min-width:778px){...}
desktops and greater #media(min-width:992px){...}
large screens #media(min-width:1140px){...}
Css example
#media(min-width:992px){
#col2{padding-top:70px;}
}
Working example
http://www.bootply.com/SHj7pkKt80
The issue here is that the columns are not equal height. CSS only offer a couple of options for equalising columsn heights. CSS Tables and Flexbox.
You can leave the floats in place but flexbox will override the floating to a certain extent.
Nevertheless, the impact can be minimal depending on your requirement.
Codepen Demo
#logo {
background-color: red;
height: 100px;
width: 150px;
color: white;
}
#navbar {
background-color: blue;
height: 30px;
width: 100%;
color: white;
}
.row {
display: flex;
flex-wrap: wrap;
}
#col2 {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>
I'm trying to make a responsive website and this is my layout as seen on the
desktop version. With the intended mobile version like so.
Because i'm trying to make the columns to fill 100% of the height in my browser, i have changed a few bootstrap codes. Is there anything that i should change in my code if my css is
html,body,.container{
height:100%;
}
.container{
display:table;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.row
{
height: 100%;
display: table-row;
}
.col-xs-6.no-float{
display: table-cell;
width: 50%;
padding: 0 0 0 0;
float: none;
}
It is wrong idea, bootstrap classes shouldn`t be changed. Write your custom css with custom classes.
<div class="container full-height-container">
<div class="row full-height-row">
<div class="col-md-6 col-xs-12 left full-height-col">
<div class="row">
<div class="col-md-4">
c1
</div>
<div class="col-md-4">
c2
</div>
<div class="col-md-4">
c3
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 right full-height-col">
test2
</div>
</div>
</div>
html,body{
height: 100%;
}
.left{
background: red;
}
.right{
background: yellow;
}
.full-height-container{
height: 100%;
}
.full-height-row{
height: 100%;
}
.full-height-col{
height: 100%;
}
Take a look: fiddle
Have you tried using media screen? That way you could set different sizes on different resolutions. For example:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
It means if the resolution is 480 and less then the given example will apply. Also if you do not want to have these media screens in one css you can set them in the head section:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
I'm trying to create a centered div with 2 images, side by side, and have the one on the right jump under the first image when the browser scales down. And for all of it to be centered.
I tried doing it using divs but I'm stuck and can't figure out if what I'm doing is even correct. Right now the images don't scale down.
Here's a fiddle with my code:
http://jsfiddle.net/v5dejopw/1/
.wrapperlookbook {
overflow:hidden;
width: 1200px;
margin:0 auto;
padding-top: 60px;
}
#onelookbook {
float:left;
width:585px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:585px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
Can anyone point me in the right direction?
Thanks!
My sugestion is add this in your code: if want in one line:
.wrapperlookbook {
max-width: 1200px;
width: 100%;
}
#onelookbook {
width: 50%;
}
#twolookbook {
width: 50%;
}
If want in two line:
#media screen and (max-width: 600px) {
#onelookbook {
width: 100%;
}
#twolookbook {
width: 100%;
}
}
Good luck!! ;)
The problem was about width of your elements. Check it out here:
.wrapperlookbook {
overflow:hidden;
width: 400px;
margin:0px;
margin: auto;
padding-top: 60px;
border: 1px solid green;
}
#onelookbook {
float:left;
width:200px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:200px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
<div class="wrapperlookbook">
<div id="onelookbook">
<a href="#">
<img src="http://placehold.it/585x600" width="585" style="max-width:100%;height:auto;"></a></div>
<div id="twolookbook">
<a href="#">
<img src="http://placehold.it/585x600/c0c0c0" width="585" style="max-width:100%;height:auto;"></a></div>
</div>
Ps: I decreased the width here
I think work with bootstrap is a good option for you, since bootstrap takes care of the resizing of every element.
First, download the latest version of bootstrap from: http://getbootstrap.com/getting-started/#download
next, reference the files in the head
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
then, add a couple of div in your body
<body>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
What means this? Bootstrap works in 12-column mode. In this case, I made two with width 6 each (50%) for resolutions xs (extra small), sm (small), md(medium) and lg(large). Bootstrap will resize the divs depending on device resolution, and, if you resize the browser, the page will be resized accordingly.
This is only a basic example, but can help you as start point to use bootstrap.