Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Featured Image 100% Width

Posted on 2015-02-05
11
Medium Priority
?
116 Views
Last Modified: 2015-03-02
I am trying to size the featured image, or post thumbnail, to automatically stretch the image to 100% width of the div, regardless of the size of browser you are viewing the site in. I am able to get this to work with divs that have a background image using the style attribute cover. But since the featured image is not in the background this solution doesn't seem to work.

I have tried setting img for the div to 100% with no avail.

To reference the page in question, you can view http://mj2marketing.com/borror/2015/01/from-high-street-to-wall-street/. CSS is included below. I have not included size settings in functions.php.

#blog .featuredimg {
	
	width: 100%;
	height: 200px;
	padding-top: 300px;
	text-align: center;
	border-bottom: 5px solid #b51218;	
	
}

#blog .featuredimg img {
	
	width: 100%!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
}

Open in new window

0
Comment
Question by:43homes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40592249
The image has local html attributes for width and height and those override any styling.  The CSS rules are not being applied.

Cd&
0
 

Author Comment

by:43homes
ID: 40592271
I thought about. I added it as a featured image using the dialogue in wordpress. I can see when trying to edit the image there that it has the dimensions set as 600 x 300 (which is the image's original size). I don't appear to have an option to not apply a size in the edit image options.  Any ideas on how to remove this html attribute that appears to be set by the featured image?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40592318
If the dialogue tool is not allowing you to do a simple thing like write a line of code then don't use it and write the code yourself.  If you are limited to working through and abstracted level and can't code then you need to be prepared to live with very limited capabilities, or hire a professional to do the work for you.

If you look at the backend of the dialogue you should see what variables are being set for the width/height, and then you just need to eliminate the bit of code that generates the image portion of the page.

Or you can wait and see if Jason or one of the other WP internals guys come along.  I don't do WP internals, and most of the time I would rather it did not exist.

Cd&
0
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 

Author Comment

by:43homes
ID: 40592373
I came for help, not lectures. I rather people who are snarky and have this attitude just chose not to respond. Best to you.
0
 
LVL 15

Expert Comment

by:eemit
ID: 40592532
You can try to add this to your child theme's style.css:
#featuredimg img {
    max-width: 100%;
    height: auto;
    width: 100%;
}
0
 
LVL 18

Accepted Solution

by:
Lucas Bishop earned 2000 total points
ID: 40593086
I can see when trying to edit the image there that it has the dimensions set as 600 x 300 (which is the image's original size). I don't appear to have an option to not apply a size in the edit image options.

I believe what you want to do is switch the wordpress wysiwyg editor from Visual (rich text) to Text (code) view. This will give you access to remove the height/width attributes from the img.

This feature is not part of the "edit image" console. It's on the main post editor in the top right.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40594052
Snarky??? Oh I get it anyone who expects someone using a tool to actually be familiar with how it works is snarky.

To be a plumber you need a license and testing to demonstrate you actually know how to do the job; maybe we need the same for those who think they are web developers because they can get a WP page to render without hanging the browser.

Cd&
0
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 40595300
You may also want to install the plugin called "Regenerate Thumbnails". Once you use an image as featured it's sort of cached at a specific size until you regenerate.

You can add a few lines of code and have your own featured image sizes:

In the functions.php you can add this code:

add_image_size('blog-archive',225,225, true);

Open in new window


This is an example of a new attachment image size I've created for my theme. The values are: name, height, width, and true/false for hard crop.

Once you've added this to your functions.php, simply add the name of new image size inside the parentheses your featured image code like this:

<?php the_post_thumbnail('blog-archive'); ?>

Open in new window

0
 

Author Comment

by:43homes
ID: 40639790
I've requested that this question be deleted for the following reason:

No answers were sufficient.
0
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 40639791
There were plenty of sufficient answers here. I believe that our answers were not able to be implemented do to the limited knowledge of the poster regarding WordPress development.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40640659
I agree with laugh; if the user is not skilled enough to implement simple solutions, they need to either upgrade their skills or hire a professional to do the work for them.  The Experts did not fail to respond with appropriate solutions and should not be penalized because the skills required to implement are outside the range of the user.

Cd&
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
Suggested Courses

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question