CODEWITHSUNDEEP
csswordpress
John Szramiak
John Szramiak

Reputation: 73

CSS img[Attributes Style]

I'm having a problem in Wordpress and CSS. I want to enable my images to be the full width of my posts (800px) but right now they are being capped at 620px. When I go in to Inspect Element, this is the CSS code I'm getting:

img[Attributes Style] {
    width: 640px;
    height: 427px;
}

In Inspect Element, this block of code is grayed out and I can't edit it. What is this? What is the [Attributes Style]. In Wordpress's CSS Editor I've added code for img max-width: 800px, but this has no effect. I've also tried img width: 800px, but this forces ALL images to be 800px.

Please help! Thanks! :)

Upvotes: 5

Views: 15954

Answers (4)

Daro
Daro

Reputation: 1

add this code in functions.php file and change the width number 

if(!isset($content_width)) {
  $content_width = 825;
}

Upvotes: 0

Mathes
Mathes

Reputation: 1

Here is the solution for custom logo width and height change

Theme -> Function.php

And then find

//Logo support
add_theme_support( 'custom-logo', array(
    'height'      => 78,
    'width'       => 445,
    'flex-height' => true,
) );

Here you can change the width and height.

Upvotes: 0

John Szramiak
John Szramiak

Reputation: 73

I went to Wordpress>>Customize>>Additional CSS and then there was a box that said Media Width. I set this to 825 and it fixed it! Not sure where in my CSS code this applied but now it works. Thanks Daniel and Pete for your help anyways! :)

Upvotes: 1

user7236046
user7236046

Reputation:

It's because it has a width and height set on the image via attributes.

<img src="/path/to/image.png" width="800" height="400" />

You can add some CSS to your stylesheet (as opposed to any JavaScript or PHP fix to remove the attributes from the image tag) to make it full width of the container.

.image-container {
    width: auto;
    max-width: 100%
}

.image-container img {
    width: auto;
    max-width: 800px;
    display: block;
}

Upvotes: 4

Related Questions