I'm stuck using a specific blog layout for a Wordpress theme. I have modified it but am having issues getting a 1920px by 550px image to center and hide the overflow. At the moment, the image is just becoming stretched.
Link to the blog in question: http://goo.gl/5Id68s
Code:
.template-blog .big-preview {
padding: 0 0 0px 0;
width: 1920px;
}
.template-blog .big-preview img {
width: 100%;
height: 510px;
background-position: center center;
overflow: hidden;
}
<div class="big-preview single-big">
<a href="sample.com" title="Sample Image" class="lightbox-added">
<img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image">
</a>
</div>
Appreciate the assistance!
Apply the overflow and its value to .big-preview or whatever that contains the image instead. The Image can't overflow itself.
.big-preview {
overflow: hidden;
width: 100%;
height: 510px;
}
.big-preview img {
width: 100%;
height: auto;
}
<div class="big-preview single-big">
<a href="sample.com" title="Sample Image" class="lightbox-added">
<img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image">
</a>
</div>
Note: You can use negative values of margin property to get it to center. E.G margin-left: -100px.
You can center your header by applying margin: 0 auto; to your style
#top .fullsize .template-blog .big-preview {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1920px;
}
If you need to center the image, adding text-align: center; to its parent block element will center the image as images are inline elements
Related
How can I make a div's sizing properties behave exactly like they do for image tags, if the div's background is an image?
The idea is to duplicate the way an image tag behaves in this code snippet:
div{
background-color: #2DBCFF;
text-align:center;
box-sizing: border-box;
font-size:0;
}
img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
<div style="width:300px; height: 150px; line-height: 150px;"><!-- <<<CSS props controlled
and changed with JS
--><img src="http://i.stack.imgur.com/o23xS.jpg"><!--
--></div>
NOTE :
the div's height and width properties are changed with JS
FOR CLARITY :
I want the CSS properties width, height, max-width, and max-height properties behave the same as if the div tag was an image tag. (aspect ratio preserved, size of div is based on image, etc...)
There was a lot of modification done to this faux img (.imgDiv), the reason why it's harder than it should be is because img is a replaced element and div is not, this article will explain the differences (author's second language is English, but the grammatical errors do not hinder comprehension.)
Example 1. & 2. The following are the original img (.control) and .imgDiv:
// Example 1. `.control`: `position: relative` was added for demo purposes.
.control {
position: relative;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.imgDiv {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
background-image: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Background Properties
background-image
background-repeat
background-size
background-position
In short, if you want to mimic a replaced element, you should use a replaced element. What determines a replaced element's dimensions is not itself, but what it has (ie content of an img would be a png file), a non-replaced element is not determined by it's content (ie div). So I figured a video element would be a more suitable img replacement.
Example 3. & 4. A quick breakdown:
// Do not copy this code, I broke it into pieces so you don't have to scroll
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<video id="vid1"
poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"
width="300" height="150"></video>
</div>
// Do not copy this code, I broke it into pieces so you don't have to scroll
<video id="vid2"
poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"
src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4"
width="100%" height="auto">
</video>
Attributes:
poster: This attribute accepts a path to an image then displays the image until the video element plays. Without going any further, we can see that thevideo element can stand in for img easily.
controls: They are removed since we are only interested in the image aspects of the video element.
src: I assigned this attribute a small video (86.6KB). I don't think we need it, I just added it in for testing.
width and height: A video element by itself can be responsive just by setting width to 100% and height to auto.
Plunker
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35522592</title>
<style>
body {
counter-reset: exp;
}
span.txt:before {
counter-increment: exp;
content: "Example " counter(exp)". ";
}
.box {
position: relative;
display: inline-table;
min-width: 300px;
min-height: 150px;
margin: 5% auto;
}
.case {
position: relative;
background-color: #2DBCFF;
text-align: center;
box-sizing: border-box;
font-size: 0;
margin: 20px;
}
.control {
position: relative;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.imgDiv {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
background-image: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.big {
font-size: 24px;
}
.txt {
margin: 0 0 15px 20px;
}
#vid1,
#vid2 {
fit-object: contain;
}
#b2 {
background: #F06;
min-width: 40vw;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section class="box">
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<img class="control" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
</div>
<span class="txt">This is the image<b class="big">⇧</b> from the OP.</span>
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<div class="imgDiv"></div>
</div>
<span class="txt">This div <b class="big">⇧</b> uses the property background-image.</span>
<div class="case" style="width:300px; height: 150px; line-height: 150px;">
<video id="vid1" poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="300" height="150"></video>
</div>
<span class="txt"><b class="big">⇧</b>This is a video element it only has an image, no video.</span>
</section>
<section class="box" id="b2">
<video id="vid2" poster="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4" width="100%" height="auto"></video>
<span class="txt">This is a video element <b class="big">⇧</b>it has an image and a video.</span>
</section>
</body>
</html>
If what you mean is that the div width and height change with respect to the aspect ratio like the image then you can rely on CSS by using padding like this:
div {
width: 100%;
max-width: 300px;
height: 0;
box-sizing: content-box;
padding-bottom: 50%; /* Aspect ratio of the width/height */
}
No JS needed.
I want to display an image on the webpage. The image is long enough having fixed height. So, when someone checks responsiveness by decreasing screen-size it should remove the extra size from that div(which is happening).
I don't know the particular term. So, I will try to explain. it should be shown from the centre point. If image is "abcdefgh". Assume 'a','b'... all are grid number. The default behaviour when screen size will be relatively half is "abcd", but I want to display "cdef".
I gave overflow: hidden to remove extra image out of div. I tried margin-left, margin-right both auto. But, it is only required when the image is less than div size.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<body>
<div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;">
</div>
</body>
</html>
You can add object-fit: cover to 'crop' the image responsively
I used object-fit: cover;, this works.
img {
display: block;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<body>
<div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;">
</div>
</body>
</html>
Only object-fit: cover will not work. It also needs width and height values. For best practice give height value. Please this value should not in percentage(%). And give image width: 100% and height: 100%. It will work.
.parentDiv {
border: 4px solid black;
width: 80%;
height: 250px;
margin: 0 auto;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="parentDiv">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris"><div>
Please check this link: jsfiddle
You can set fixed size for image an use object-fit: cover in css.
.wrapper {
border: 4px solid black;
height: 200px;
overflow: hidden;
text-align: center;
}
.img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
object-fit: cover;
}
<div class="wrapper">
<img class="img" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris">
</div>
I have a header image that stopped resizing after I placed it in a CSS wrapper. I specified the width of the wrapper, b/c I want the navigation to the right to be directly above the white space area below - flushed to the right.
How can I set the width of the wrapper in which I place an image but maintain the responsiveness (image responds to resizing)?
HERE's the URL; http://www.insidemarketblog.com/
Here's the code:
HTML
<div id="header">
<div class="wrap">
<span class="menu_control">≡ Menu</span>
<ul class="nav"><li class="page_item page-item-35">ABOUT US</li></ul>
<h1 id="site_title"><a href="http://www.insidemarketblog.com"><img id="thesis_logo_image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy" width="400" height="87" title="click to go home" />
</a></h1>
</div>
</div>
CSS:
.wrap {
width: 1000px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
You need to make the image flex too:
img {
display: block;
width: 100%;
height: auto;
}
I believe you have two issues here:
1st, Your .wrap is 1000px in width. please make it 100%
2nd, your img css should have a max-width: 400px; and width:100%
This way you will have your img exactly the way you want it.
Here is the css:
.wrap {
width: 100%;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
img {
width: 100%;
max-width: 400px;
height: auto;
}
See it in Action: http://jsfiddle.net/salota8550/59LKP/
I have a div that should always be in the center of the browser. now there's an image that will always be in the middle of the browser. but problem is that a div is 960px wide and but the picture is 1263px. how do I solve the problem? what I still need is dead as soon as the browser window smaller, should come scrollbars only at 960px. I know that I could theoretically solve anything, if I image Tell css as a background-image integrate the. but that does not work, unfortunately, because I really need the img tag
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
http://jsfiddle.net/UcLnD/
Try with this:
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.header-bottom-wrapper{
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {
margin-left: -152px;
}
Im not sure what you mean by not using Css for your fix. But does the image need to stay the same size? If you want the image to resize based upon browersize add this to your Css:
.header-bottom-wrapper img {width:100%;}
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {width:100%;}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
you can use negative margin to virtually reduce space needed by image.
<div class="clipimg">
<img src="imagetoowide-1000px" />
</div>
.clipimg {
width:500px;
text-align:center;
}
clipimg img {
margin:0 -50%;
}
Tune negative margin for both right/left and text-align.
Example here centers image and clips sides
examples : http://codepen.io/gc-nomade/pen/hjyEv/
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}