doing a totally new website now. Haven't coded anything yet, just in the research stage. You know how an image will be on your computer or TV screen and it will start to grow bigger, not in a zoom way so much than in a way as if the image was coming towards you? What would you call that? I want to do the reverse, have it appear to be going toward the background on the screen from where I am, so the image will technically be getting smaller but will have kind of a 3D feel, as if it's getting farther away. Can anyone help me with what I should be looking for? Thanks!
Do you mean the effect of an responsive image?. Bootstrap makes use of the <img class="img-responsive" src="..."> to create responsive images. An example down below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
trasnform: scale() does something like you're describing.
img {
max-width: 100%;
animation: scale 3s forwards;
transform-origin: 50% 0;
}
#keyframes scale {
to {
transform: scale(0);
}
}
<img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">
Related
I'm trying to find a way to float certain items left on left-hand pages, and right and right-hand pages. Not sure where to look, since all I can find that seems related is #page :left/:right, but that seems to only apply to the page box and margins, not the page content.
Here's an example of what I want to do; The first float wants to go to the right, if it is on page 1, and the second float wants to go to the left, if it is on page 2, but to the right if it is on page 3.
The big boxes are just meant to demonstrate that there could be a lot (particularly an unknown) of stuff between the floats, and I can't predict which page might contain the float. (Thanks to Christian for making the assumption that I could, to point out the unstated assumption in my question, and I could make this clarifying edit.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div { border: solid black 1px; }
</style>
</head>
<body>
<h1>float left or right</h1>
<div style="page-break-inside: autor;">
<div style="float: right;">
float 1 content
</div>
page 1 content
<div style="height: 8in; width: 1in;"></div>
unknown amount of content between floats
<div style="height: 8in; width: 1in;"></div>
<div style="float: right;">
float content somewhere later
</div>
<div>content winds up on page 2? 3? 4? 5?</div>
</div>
</body>
</html>
But how do I instruct the browser to do that?
N.B. At least in 2001, the "Complete Idiots Guide" series of books used this sort of odd/even dependent float for the sidebars entitled "Learning Links" (and maybe other such sidebars also). So there is precedent for this sort of style requirement, although I'm not trying to reproduce their books in HTML!
Here is the solution to your query
If you change your html structure as given in the code below then apply the following CSS, then your query will be satisfied
.pages div:nth-child(odd) {
text-align: right;
clear: both;
}
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div {
border: solid black 1px;
}
</style>
</head>
<body>
<h1>float left or right</h1>
<div class="pages">
<div id="page-1">page 1 content</div>
<div id="page-2">page 2 content</div>
<div id="page-3">page 3 content</div>
</div>
</body>
</html>
The structure is not changed much but it's almost similar to the one you provided
I would like to display the image and footer to always fit the browser window - no scrolling. In order to fit the image should be resized while keeping the ratio. Footer should always be at the bottom and the image fill the rest of the space.
I thought this should be easy to achieve with bulma - but so far i couldn't make it work. Is the hero-layout not the right layout to achieve this with bulma?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<section class="hero" style="height: 100vh">
<div class='hero-body is-paddingless'>
<figure class='image'>
<img src="https://via.placeholder.com/400x800">
</figure>
</div>
<div class='hero-foot'>
<div class='box'>
hero-foot
</div>
</div>
</section>
</body>
</html>
First, I dont think many knows what bulma or hero-layout is, but if you want a background to be a picutre and fit the whole screen you should try it with this, this also should make the page be full width without scrolling:
CSS:
body, html {
height: 100%;
}
.bg {
background-image: url("your_background");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
If that doesnt work for you, you can try disabling scrolling:
overflow: hidden;
I have a row with a certain height (e.g. 600px) and would like fit an img (size 1920x1080) into this row, stretching responsively 100% to the row width but not exceeding the height.
In other words, only 600px of the height of the image should be shown (the rest can be cut off, hidden, etc.), and it should remain responsive to the row width. To illustrate, only the part within the red borders should show:
The problem I am having is that "img-fluid" always fits the image to the smaller height of the container, and thus shrinking the width to keep the aspect ratio. Without img-fluid, or adding a fixed height to the image, the aspect ratio gets lost and the image is "squeezed" into the row-container. My code:
.img-400 {
height: 400px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row img-400">
<div class="col-12">
<img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
</div>
</div>
</div>
Note I tried this one: Constraining image height with bootstrap responsive image? but didn't work, it keeps scaling the img out of the container.
the above solution works if the .img-fluid is not manipulated:
.img-400 {
height: 400px;
overflow: hidden;
}
Hi try this one,
.img-400 img{ width: 100% ; }
Hope this helps :)
To achieve your image fitting into a specific height, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="product1.html">
<img src="image1.jpg" class="unim" height="100"/>
</a>
</div>
</div>
</div>
</section>
</body>
I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
I am currently having some img's set to height:0px;, and when its ID gets in :target its height increases to a optimal value.
As you can see i can only have one img visible at a time, because when one of them is in target the other one returns to height:0px;
Is it possible to make the :target properties act more like a toggle, so that i can have more img's visible at a time?
I then think that i would need a :target to make them height:0px; again.
Example code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img{
height:0px;
}
:target{
height:200px;
}
</style>
</head>
<body>
img1
img2
img3
<img id="img1">
<img id="img2">
<img id="img3">
</body>
</html>
Thanks