I'm trying to create a full-width responsive portfolio grid. I set the width of the items using calc(), and set the thumbnail image to take up 100% of thumbnail div using:
`img.attachment-portfolio-thumb{
width:100% !important;
height:100% !important;
}`
This works, aside that there is about an extra white 10 pixels below each image, inside each div.portfolio-list, and I can't figure out where it is coming from and how to get rid of it. In "inspect element", when hover over the div.portfolio-list, the div takes up the entire space 100%, so it's something inside the div which is causing the extra space.
What I noticed is that in "inspect element" mode the <a> tag (that the portfolio-thumb thumbnail is in, in the Pods Template), has the following dimensions - and the white extra space if part of it: 315px x 26px (315px is the width of the div.portfolio-list as this browser width).
Link to visual image: The left is on hover, as you can tell the overlay includes the bottom empty 10px. The right bottom you see a white strip.
http://prntscr.com/5yedsp
Below is the code for the grid:
Pods Template:
<div class="portfolio-list">
<div class="overlay">
<p>{#post_title}</p>
{#post_thumbnail.portfolio-thumb}
</div>
PHP:
<section class="portfolio_home_inner">
<section class="portfolio_home">
<?php
echo do_shortcode ('[pods name="portfolio" template="portfolio-list"]');
?>
/ Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}
CSS:
div .portfolio-list{
float:left;
width: calc(20%);
overflow: hidden;
position: relative;
display: inline-block;
}
/*Wordpress default selector for new image size*/
img.attachment-portfolio-thumb{
width:100% !important;
height:100% !important;
}
div .portfolio-list p{
display: none;
color:#000;
}
div .overlay:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(234,79,38,.85);
}
Would anyone know what is causing the extra 10px underneath the image?
Thank you!
You image has a margin on it of 32px 0 15px (inspect element with chrome), for the class ".image_pic". Setting the image_pic "margin-bottom : 0;" should sort it out for you, perhaps with the important tag.
Related
Link to website
I've already followed the instructions here http://www.cbdweb.net/woocommerce-and-image-sizes/
and here https://theme-fusion.com/knowledgebase/how-to-fix-woocommerce-image-size-issues/.
Even though I changed the sizes for Catalogue Image and Product Thumbnails in WooCommerce Settings --> Products --> Display, I still see that the image width and height are set to 300 in the inspector.
When you inspect one of the images, you'll see:
<img width="300" height="300"
src="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-300x300.jpg"
class="attachment-shop_catalog size-shop_catalog wp-post-image"
alt="Hamburger Collection" title="Hamburger Collection"
srcset="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
300x300.jpg 300w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
150x150.jpg 150w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
180x180.jpg 180w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
600x600.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"> == $0
With the styles
.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none;
}
.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}
If I try to edit the styles directly in my theme's stylesheet (style.css), I get a pretty bad result:
.attachment-shop_catalog .size-shop_catalog .wp-post-image {
width: 400px!important;
height: 400px!important;
}
.woocommerce ul.products li.product a img {
width: 400px!important;
height: 400px!important;
}
If I disable max-width:100% from the style:
.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}
I actually get the correct size, but then the images overlap.
They also stay at this size when the page responds, which we don't want.
What really doesn't make sense to me, though, is why the img size is still at 300 x 300 when I've already changed the size to 600 x 600 literally everywhere I can think of - in my Stylesheet and for the Catalog Images, Single Product Image, and Product Thumbnails options under WooCommerce Settings --> Products --> Display. I have also regenerated my thumbnails via the Regenerate Thumbnails plugin. Also, the images don't even appear to be 300 x 300 - they actually look like they're 150 x 150 anyway.
The width of your images is currently being dictated by their parent li (list elements).
.woocommerce ul.products li.product
You have this set to 22.05% of it's parent of 680px. Right now you are forcing your images to be 600px with an !important. You want 2 products per row with a small gap (4%?) between, so this might work better (obviously get rid of the forced 600px width per image):
#container .woocommerce ul.products li.product, #container .woocommerce-page ul.products li.product {
float: left;
margin: 0 4% 2.992em 0;
padding: 0;
position: relative;
width: 46%;
}
Did you also check your image sizes in the main Wordpress setup, via Settings -> Media on the admin left-hand menu. If you change these then regenerate your thumbnails again.
have background images in nested divs as follows
<div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10">
this div has grey colored background image
<div style="background:url(images/job.png) no-repeat 0 0; height:131px; z-index:5">
this is a nested div with another background image having right bottom overlapping grey colored image
</div>
</div>
below image is what i have achieved so far, however, expected image is the 2nd one below
used z-index to both images however browsing through internet found that z-index does not work on background images. please suggest a solution
You also need to set
position: relative;
Thus, the z-index will - should - be effective.
z-index is relative to the parent container from which z-index is set. As such, a child cannot have a lower z-index than its parent in terms of displaying below it.
You may want to change your HTML
<div>
<div>this is a nested div with another background image having right bottom overlapping grey colored image</div>
<div>this div has grey colored background image</div>
</div>
CSS (will require some alteration)
div {
position:relative;
background:#fff;
height:131px;
}
div:first-child {
background:url(images/job.png) no-repeat 0 0;
margin-top:30px;
height:100%;
width:100%;
}
div:last-child {
background:url(images/foot_bg.png) no-repeat 0 bottom;
position:absolute;
bottom:0px;
height:100%;
width:100%;
}
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
I am looking to handle files that were uploaded by users. The main issue in that situation is that they differ in size.
How can I center an image of unknown size, both vertically and horizontally, into a div?
Thanks a lot
EDIT: I am making a thumbnail for an image. Basically, I want to keep the div to the same size, and I want the image inside that div to fit the div, but without changing the scale. I am using overflow:hidden
EDIT:My code is
<div class='pic'><img id='theimage' src='image.png'></div>
and my CSS is
#theimage {
vertical-align: middle;
display: inline;
}
You can do this using the background CSS property. Give your <div> these properties:
div.whatever {
background-position: center center;
background-repeat: no-repeat;
}
Then in your HTML (because it's being generated dynamically), add a style="" attribute to the <div> with the URL of your image in it:
<div style="background-image: url('/path/to/image.png');"></div>
You could do this with an <img> tag inside the <div> too:
<div>
<img src="image.png">
</div>
With this CSS (untested, should work):
div {
text-align: center;
}
div img {
vertical-align: middle;
display: inline;
}
I'm assuming you've given your <div> a fixed width and height elsewhere.
Force the container to behave as a table cell.
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Demo
i got a suggestion though this thread is old
try
< div style='text-align:center;overflow:hidden;width:200px;height:200px;' >
< img src='anypath' width='190'style='vertical-align:middle;display:inline;' />
works just fine ! goodluck
I want to center an image in an area, without resizing... I am using HTML.
Example:
I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.
Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.
How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?
What you will need is something like this:
<div class="box">
<img src="whatever size image you'd like" />
</div>
And for the styling (in an external stylesheet, natch) you'd apply:
/* Image centering */
div.box {
border: 1px black solid;
height: 64px;
width: 64px;
background: #444;
display: table-cell;
vertical-align: middle;
}
.box img {
display:block;
margin: 0px auto;
}
This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are
set dimensions on the div
display as a table-cell (allows vertical align)
vertical align (aligns on the Y-axis w/out weird hacks)
display:block on the img element
margin: auto centers the image laterally
Solution without IE-unfriendly display:table-cell:
<!DOCTYPE html>
<style>
div {
line-height:64px; /* that's the secret sauce */
text-align:center;
width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.
You can dynamically get an image size using the getimagesize() php function:
<?php
$size = getimagesize('imgX.png');
$height = $size[1];
$width = $size[0];
?>
<div style="text-align: center">
<img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.
Markup:
<li><div><span></span>
<img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
<p>Jessica Bowman</p>
</li>
The span was just there to get rounded corners on the image, it's not necessarily needed.
CSS:
ul.recent-list li div {
position: relative;
float: left;
width: 36px;
height: 36px;
overflow: hidden;
}
ul.recent-list li div span {
position: relative;
z-index: 100;
display: block;
width: 36px;
height: 36px;
background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}
ul.recent-list li div img {
position: relative;
top: -36px;
z-index: 0;
float: left;
}
JavaScript:
$(window).load(function() {
$("ul.recent-list div img").each(function() {
var moveX = ($(this).width() / 2 * -1) + 18;
var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
$(this).css({'top' : moveY, 'left' : moveX});
});
});
The solution is a simple bit of CSS + HMTL
<img src="transparentpixel.gif"
width="64"
height="64"
style="
background-image:url('path/to/image.jpg');
background-repeat:no-repeat;
background-position:center center;
" />
the transparentpixel.gif is a simple 1x1px transparent gif image
An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:
<div style="text-align:center;">
<img src="x.jpg">
</div>
and no i don't know why text-align would work, but it appears to in my experience.
Use CSS to render the image using background:
<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>
This will show the image in the center, without scaling it.