You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* The following styles are applied to ensure the images resize correctly:
2134
2134
*
2135
2135
* ```css title="Responsive Image Styles"
2136
-
*
2136
+
*
2137
2137
* :where([data-astro-image]) {
2138
2138
* object-fit: var(--fit);
2139
2139
* object-position: var(--pos);
2140
2140
* }
2141
-
*
2141
+
*
2142
2142
* :where([data-astro-image='full-width']) {
2143
2143
* width: 100%;
2144
2144
* }
2145
-
*
2145
+
*
2146
2146
* :where([data-astro-image='constrained']) {
2147
2147
* max-width: 100%;
2148
2148
* }
2149
-
*
2149
+
*
2150
2150
* ```
2151
2151
* You can enable responsive images for all `<Image />` and `<Picture />` components by setting `image.experimentalLayout` with a default value. This can be overridden by the `layout` prop on each component.
0 commit comments