Change size of image through css in outer div container

问题

I want to change the width of an image via css. As I am doing this through typo3 I only have access to the outer div container (custom border of the content element). So I added the following line to my css file:

.Bild-Startseite img { max-width:50% !important; }

The div container is using Bild-Startseite. Unfortunately the container does not resize, leaving a blank area on the right of the image. How can this be corrected, so the image is aligned to the right and the text floating around it? I only want to change this image and not the others on the site. Also typo3 does not give me access to the other containers.

The site is here: http://web182.theta.ibone.ch/klingler_ag/home.html

Thanks

回答1:

In order for that to work, you should style your image container. In your case:

figure.csc-textpic-image.csc-textpic-last

You stated that you wish this to be applied only on this specific page. Please try the following:

#c48 figure.csc-textpic-image.csc-textpic-last {
    max-width: 400px; /* or whatever value you may fit. */
}

I believe #c48 is specific to that page only. So you have that rule applied only to that page.

If #c48 is not specific to that page only, then you should add a css class to your body page.

You should edit your typo3 template from the setup field on your main template, and do:

page = PAGE
page {
    ...

    bodyTagCObject {
        field = uid
        wrap = <body class="uid-|">
    }

    ...
}

With this you would have a single class and, with that, you can simple do:

.uid-yourIdNumberHere figure.csc-textpic-image.csc-textpic-last {

//your page specific style here.

}

来源：https://stackoverflow.com/questions/16255119/change-size-of-image-through-css-in-outer-div-container

标签

css

typo3