CODEWITHSUNDEEP
htmlcss
Rory H
Rory H

Reputation: 37

How do I override "fit width to container"?

Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.

What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:

HTML:

<div id="imageContainer">
    <img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>

CSS:

#imageContainer {
    background-color: #333;
    width: 350px;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
}

The following code should result in something that looks like this:

http://www.kirupa.com/html5/examples/clipping_content.htm

However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:

http://roryhammoud.com/test-new

Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.

The Question

So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..

Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)

Thank you in advance.

Upvotes: 0

Views: 1005

Answers (2)

gvee
gvee

Reputation: 17161

Because you are not able to modify the existing CSS, you must override it.

You need to be more specific with your selectors to target the element in question like so:

#imageContainer img {
    max-width: inherit;
}

Upvotes: 1

j08691
j08691

Reputation: 207901

You have a CSS rule in your file that sets the max-width to 100%. Remove it.

.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}

If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}

Upvotes: 2

Related Questions