I need to align image to div (.md4 - boostrap) horizontal and vertical...
I try do this like:
<div class="front" style="height: 820px; width: 820px; vertical-align: middle;" >
<div class="inner" style="float:none; margin:0 auto;">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"/>
</div>
</div>
But it doesn't work. Its still align only in one way.
jsfiddle https://jsfiddle.net/tzvze7ew/
What i do wrong ? And how should its look for work?
You can use the CSS property transform to center both vertically and horizontally.
body {
margin: 0;
}
div:first-of-type {
background-color: blue;
height: 100vh;
}
img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="col-md-4">
<div class="main">
<div class="submain">
<div class="front">
<div class="inner">
<img src="http://placehold.it/100x100" />
</div>
</div>
<div class="back">
</div>
</div>
</div>
</div>
The above solution won't support all the browsers. Because transform is CSS3 property.
We can achieve through javascript. What we can do is lets calculate the height of the browser and divide by 2 and minus 50% height of the image.
Below is code
.img {
margin: 0 auto;
}
Javascript
Lets say your image height is 150px.
<script>
$(document).ready(function(){
var height = window.innerHeight;
var new_height = (height/2) - 75; // Half of 150 of 75.
$('.img').css('margin-top', new_height+'px');
});
</script>
Related
I have a problem with the displaying from two containers with css. The first container has a background image. The second container is text only.
The position of the second container is on the top the first container.
but by the displaying in small media queries, I would displaying the second container after the first container.
#back,
#back1 {
width: 100%;
height: 50px;
background-color: red;
}
<html>
<body>
<div id="back">
<div id="text">
Hello
</div>
</div>
<hr />
<div id="back1"></div>
<div id="text">
Hello
</div>
</body>
</html>
Put them both in a relatively positioned container and then add a media query to absolutely position the the text for larger screens:
#back {
width: 100%;
height: 50px;
background-color: red;
}
#container {
position: relative;
}
#media screen and (min-width: 768px) {
#text {
position: absolute;
top: 0;
}
}
<div id="container">
<div id="back"></div>
<div id="text">
Hello
</div>
</div>
I am using owl carousel 2 and my problem is that I am looking for a solution to maintain images' aspect ratio while users resizing the browser window (responsiveness) based on the graphist's design.
which makes the developing harder, each item is a carousel includes 3 pictures,
I use this function in Scss to make my images 16:9 :
#function aspect($width) {
#return $width * 9 / 16;
}
which is not very interactive and always returns the static size of the image (though I've written media queries in different scales, still it's not very stable)
here is my carousel init code:
$('.owl-carousel').owlCarousel({
nav: false,
dots: true,
items: 1,
center: true,
//autoWidth: true,
loop: true,
});
and my HTML code is :
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<a href="#Url.Action("Video", "Service")">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" />
</div>
#foreach (var thumb in videoThumbpath)
{
<div class="item">
<img src="#thumb" alt="#serviceName" title="#serviceName" />
</div>
}
</div>
<h5> #service.serviceName</h5>
<div class="details">
#{
_serviceRate = float.Parse(service.serviceRate);
}
<p class="pull-left">#service.VideoCount </p>
</div>
</a>
</div>
is there any solution that I can make it responsive images through owl carousel 2?
thanks a lot
I found the solution, I added these styles to my Scss file:
.outer {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: (9 / 16) * 100%;
}
> .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
}
}
Then I changed my Html like this:
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<a href="#Url.Action("Video", "Service")">
<div class="owl-carousel owl-theme">
<div class="item outer">
<img src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" class="inner"/>
</div>
#foreach (var thumb in videoThumbpath)
{
<div class="item outer">
<img src="#thumb" alt="#serviceName" title="#serviceName" class="inner"/>
</div>
}
</div>
<h5> #service.serviceName</h5>
<div class="details">
#{
_serviceRate = float.Parse(service.serviceRate);
}
<p class="pull-left">#service.VideoCount </p>
</div>
</a>
</div>
and it worked maintaining 16:9 aspect ratio with owl carousel 2 :)
for the grid system of the page, I used This CodePen which was really helpful for my custom sizes.
Something like this should work. Adding an fixed width to container. Then with the img css it should keep its aspect ratio, as you aspect.
.item {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="item">
<img width="400" height="400" src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" />
</div>
Just an example , you can use your own widths and heights. Could also add .item width only at certain #media query.
I set the height and width as below:
.owl-carousel {
height: 100%;
overflow: hidden;
}
.owl-carousel .owl-item img {
display:block;
height:100%;
width: auto;
}
jQuery:
owl.owlCarousel({
items:3,
autoWidth: true,
});
A site I inherited uses a sprite for some design based images. The sprite is 28px tall. Recently it began that when the site is viewed in Chrome, the sprite does not display on the elements when the height of the container with a background is > 28px.
I was able to reproduce this using the below snippet.
It's especially odd that if i create a narrower image, I don't have this problem. The break point seems to be width: 16384px or 2^14.
.outer {
width: 1000px;
background-color: skyblue;
}
.bg {
background: url('https://i.imgur.com/DEV7k42.png');
}
<div class='outer'>
<div class='bg'>
<div style='height:28px'>
See this nice background?
</div>
</div>
</div>
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
No background here
</div>
</div>
</div>
This uses an image that is 16384px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/1vd6POs.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
this image is 13684px wide
</div>
</div>
</div>
This uses an image that is 16385px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/KV0uyia.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
This uses an image that is 16385px wide
</div>
</div>
</div>
Could this be a bug? I did a quick google search and could not find anything to indicate there is a hard limit on the dimensions of an image.
I simplified the structure and placed the bg image and color on the outer div. Seems to work:
.outer {
width: 1000px;
height: 28px;
background: url('https://i.imgur.com/DEV7k42.png');
background-color: skyblue;
}
<div class='outer'>
<div style='height:28px'>
See this nice background?
</div>
</div>
<div class='outer'>
<div style='height: 29px;'>
No background here
</div>
</div>
I need to
1.Middle center align a div(contentcontainer) which contains image and text inside another div container.
2.Render the image and text for different devices so it looks nicely on both mobile and desktop devices.
Please note
1.The content html for the image and text will be sent dynamically so the height of the content container is flexible.
2.The size of the original image and length of the text are different each time so the width and height of the maintainer cannot be fixed values
3.This needs to support android and ios browsers(mainly safari and chrome).
**JSFIDDLE*
http://jsfiddle.net/1o8vuqbd/1/
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
#maincontainer {
height:100%;
width:100%;
padding:5px;
background-color:red;
}
#contentcontainer {
height:100%;
width:100%;
position: relative;
background-color:pink;
}
Here is the updated code.
HTML:
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150" style="float: left;">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
CSS:
#maincontainer {
height: 500px;
position: relative;
width: 500px;
background-color:red;
}
#contentcontainer {
background-color: #FFC0CB;
overflow-y: auto;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
I've been searching for similar questions to these, but I couldn't find one, so I'm exposing my problem, hoping you could tell me what am I doing wrong and how to correct it.
I'm trying the accomplish the following scenario: two divs, side by side, using 100% of height and width, in which the left one can be scrollable. The right one has a few divs on top of each other, and the last one should have its contents scrollable too.
A picture can better describe the scenario:
The blue divs are the ones that can be scrollable, but the height of red ones is unknown.
I was able to partially accomplish this, but the problem is that the content of the last div is pulled down from the view in the same proportion as the height sum of the red divs, so when the user scrolls that blue div he won't be able to view the full content of it.
What can I do to solve this?
I also got a fiddle where this behavior can be reproduced: http://jsfiddle.net/d3dNG/3/
Thanks for any feedback on this.
HTML:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}
Since you will not know what the size of #header1 you can go about this by using javascript or jQuery.
(Make sure to only use ids once on your page since they are unique, #header1 is used 3 times)
The html I changed:
<div class="headParent">
<div class="header1">Header 1</div>
<div class="header1">Header 2</div>
<div class="header1">Header 3</div>
</div>
The little jQuery I wrote:
function rightSize() {
var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`
$('#rightContent').css({height: mH});
}
rightSize();
Finally, a fiddle: Demo
Even once there is more of the .header1 the #rightContent will still adapt correctly to fit the content.
Try this:
HTML
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="rightOne">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
</div>
<div id="rightTwo">
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS
#rightOne {
height: 16%;
width: 100%;
}
#rightTwo {
height: 84%;
width: 100%;
}
I've updated your fiddle: http://jsfiddle.net/d3dNG/4/