I have a page with a title, paragraph and a single image, that can be of very different sizes/aspect ratios.
I would like the image to adapt so that it will either fill maximum available height, or be limited by its width, without loosing aspect ratio, neither causing scrolling.
this is my basic config:
angular.module("myApp", ["ngMaterial"]);
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-fill>
<div flex style="background: red;">
<h1>Title</h1>
<p>Details. Blablabla.</p>
</div>
<div flex="60" style="background: blue;" object-fit="fill">
<img id="myImg" ng-src="http://placehold.it/200x400"/>
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
I have looked at a lot of SO posts, websites, blogs, etc. I can't figure out where to start to get this done. Most articles about fluid images or responsive images only talk about scrollable web pages. So even a good reference on the topic would be helpful. Thank you.
EDIT: Updated the snipped to use flex layout. As you can see, the image goes outside the blue div bounds. I have used object-fit="content"; or object-fit="fill"; but none seems to constraint the image to respect div bounds
It can be done by object-fit(it doesn't support IE) and css calc(it supports most of broswer).
What did you do?
I wrap image by a div(.wrapper), calculate height of it by css calc.
height: calc(100vh - 19px - 38px); //100% of viewport - height of p - height of h1
and then use object-fit to image is fitted the height of .wrapper by keeping the ration of image.
Image by high height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<img id="myImg" ng-src="http://placehold.it/200x400" />
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
Image by less height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<!-- <img id="myImg" ng-src="http://placehold.it/200x400" /> -->
<!-- Should work with such extreme case as well -->
<img id="myImg" ng-src="http://placehold.it/1000x200" />
</div>
</div>
I would use css properties like "background-size:cover". Here is an example. First 2 containers use the "cover" approach on 2 containers with different aspect ratio without altering the image ratio. The third one uses "pixel dimensions". Remember that if u alter either x or y axis dimensions do only so on one of them and define the other as auto in order to not alter the image ratio(like hover effect does on third container).
fiddle:
https://jsfiddle.net/coolcatDev/0111sfmg/2/
HTML:
<div class="container1">
</div>
<br>
<div class="container2">
</div>
<br>
<div class="container3">
</div>
CSS:
.container1 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:300px;
width:300px;
border:2px solid green;
}
.container2 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:600px;
width:200px;
border:2px solid green;
}
.container3 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height:200px;
width:300px;
border:2px solid green;
}
.container3:hover {
background-size: 450px auto;
}
You can define this in your stylesheet, inline, inside custom directive, ng-style or whatever suits you best.
Browser support:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
HTML-
<div class="wrap">
<div class="floatleft">
<div class="JShover">
<h3 class="border">Works with your business applications
<p >Connect with Office 365, GSuite.</p></h3>
</div>
<div class="JShover">
<h3 class="border">Works with your business applications
<p>Connect with Office 365, GSuite.</p></h3></div>
</div>
<div class="floatright" >
<img class="integration" src="integrations-image.png" width="100%" height="100px">
</div>
<div style="clear: both;">
</div>
</div>
CSS used for the div-
.border{
border-left:6px solid #3793EE;
text-align: left;
padding-left: 5%;
}
div.JShover{
height:50%;
text-align: left;
opacity:0.5;
}
.wrap {
overflow: hidden;
margin: auto;
max-width: 700px;
}
.floatleft {
float:left;
width: 50%;
height: 500px;
}
.floatright {
float: right;
height: 500px;
width: 50%;
}
When the floatleft divs JShover is clicked the opacity should be 1. Otherwise it should 0.5.
JavaScript used-
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$(".JShover").click(function() {
this.style.opacity = 1
});
</script>
In the result the JShover divs have an opacity of 0.5 (since it is in the CSS) but when I click on it, the opacity does not change to 1. Is there any error in my code or implementation?
You can for example do it like this:
$(".JShover").click(function() {
this.style.opacity = 1
});
Also add opacity: 0.5; to your div.JShover element in css.
Working fiddle here.
Edit:
First, be sure to have jQuery on your site either with having and linking a local copy or linking it inside your <head> like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And second be sure to put your js code for changing opacity below the linked jQuery library, for example below or at the end of the <body> tag.
Here is your html
<div class='floatleft'>
Hello..... :)
</div>
Here is your CSS
.floatleft{
background-color:red;
opacity:0;
}
Here is your JS
$('.floatleft').click(function(){
$(this).css('opacity','1')
});
Hope this helps you
I use Bootstrap Framework for building website. And I tried to search but it wasn't effective.
Futher more, I don't have much knowledge about Javascript and CSS.
An example code like this:
<div class="row">
<!-- Squares inline-block-->
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<!-- Squares inline-block-->
</div>
Can you help me please?
There's quite a simple method to create a div with an aspect ratio of 1:1 from pure CSS.
HTML:
<div class="width ratio">
<div class="content">Aspect ratio 1:1</div>
</div>
CSS:
.width {
width: 45%; /* Desired width size */
background: #000;
position: relative;
display: inline-block;
margin: 1%;
vertical-align: top;
}
.width:before {
content: '';
display: block;
}
.ratio:before {padding-top: 100%;} /* keeps ratio at 1:1 */
.content {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
font-size: 1.5rem;
color: #fff;
}
This keeps the width the same as the height, although it would be a lot simpler to just set the width and height manually.
Suppose you give a class (let's call it 'square') to the div you want to be square:
<div class="row square">
Using CSS, you can set its height and width:
/*filename.css*/
.square{
height:200px;
width:200px;
background-color:green; /*to make it visible*/
}
To link the css file, put the following at the top of your html file:
<head>
<link rel="stylesheet" href="bootstrap.css"> <!--I'm sure you've done this step :)-->
<link rel="stylesheet" href="filename.css">
</head>
Learning CSS is easy. Give it a try!
I have a section of my webpage that contains media, mostly pictures. I want the user to be able to re-size the picture to whatever size he/she wants. I was hoping the user would be able to drag a corner to re-size the picture if that is possible.Here is the demo: https://jsfiddle.net/anstw7Lu/ Here is the HTML:
<div id="media-section">
<!--Title -->
<div id="media-title">Media</div>
<div id="media-button" class="button-container">
<!-- The panel that will display the content -->
<div id="media-content"><br><br>
Here is my picture<br><img src="http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg" height=200px width=200px>
<br> I want to be able to resize this picture, make it larger, smaller, ect.
</div>
</div>
CSS3
You can use a new CSS3 feature called Box Resizing. You should add this to your stylesheet:
img {
resize: both;
overflow: auto;
}
Reference: http://www.w3schools.com/cssref/css3_pr_resize.asp
You might also want to consider using JavaScript, which may have wider browser support. You can use jQuery UI: https://jqueryui.com/resizable/
To create resize element or image from user side, you need to use Resizable which allow you to resize an element
$(function() {
$( "img" ).resizable();
});
#media-section{
float:left;
text-align: center;
height:500px;
width: 250px;
border-style: solid
}
#media-title{
height:6%;
width:100%;
float:left;
font-size:24px;
}
#media-button{
height:4%;
width:100%;
float:left;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
}
#media{
width:100%;
height:92.5%;
float:left;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="media-section">
<!--Title -->
<div id="media-title">Media</div>
<div id="media-button" class="button-container">
<!-- Button that when clicked activates a dalog box for the passage. -->
<button id="max-media" class="max"></button>
</div>
<!-- The panel that will display the content -->
<div id="media-content">
Here is my picture<br><img id="resizable" src="http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg" height=200px width=200px>
<br> I want to be able to resize this picture, make it larger, smaller, ect.
</div>
</div>
Use a <div> with your image as a background and then allow resizing through CSS.
.image {
width: 130px;
height: 100px;
background-image: url('https://picsum.photos/id/203/130/100');
background-size: contain;
border: 1px solid lightgray;
background-repeat: no-repeat;
resize: both;
overflow: auto;
}
<div class="image"></div>
I am trying to use CSS to center the ASlider Jquery plugin (http://varunnaik.github.io/A-Slider/) which I have embedded into the HTML code for my website. For the life of me I can't figure out how to do it!
It seems adamant that it wants to stay on the left side of my page. I have tried using the float and display CSS elements; neither of them did anything. I even tried using margin and padding, and still nothing happened. Hell, I was desperate enough to see if text-align: center; would work but that didn't do anything either.
Here is the script in CSS and HTML to include the ASlider:
.aslider {
margin: auto;
float: center;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="images/pic1.jpg" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="images/pic2.jpg" width="550px" height="300px">
</div>
</div>
<!--</div>-->
float: center; is not valid so you can remove it from .aslider. All you need to do is add a width to .aslider so that margin: auto; takes effect.
.aslider {
margin: auto;
width: 550px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
</div>
<!--</div>-->
Normally you can do it like this:
.wrapper{
width: 100%;
border: solid;
}
.center{
border: solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="center">
This needs to be centered
</div>
</div>
Add your image width to your .aslide class
.aslider{
margin:0 auto;
}
.aslide{
width:550px;
margin:0 auto;
}
<---------------------------EDIT--------------------------->
Better yet use this:
.aslider{
width:100%;
text-align:center;
margin:0 auto;
}
I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
A html element, set to width: 100%, stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100%.
You also need to make the html and body width 100%.
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
you might need to define the height and width of the parents if you dont want to use js
here i made an example on jsfiddle
jsfiddle
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Vehicles</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>